Angular コンポーネントのライフサイクル フックの詳細

この記事では、Angular コンポーネントのライフサイクル フックについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#Angular コンポーネントのライフサイクル フック

---

その中で、ライフ マークは赤色 サイクルフックは 1 回だけ呼び出され、緑色の部分は繰り返し呼び出されます。実行順序は上から下です。

ngOnChanges

Angular がデータ バインディング入力プロパティを変更に設定するときの応答は、入力の不変オブジェクトに対してのみ機能します。簡単に言うと、@Input タグの属性が変更されると ngOnChanges が呼び出され、@Input 以外のタグの属性が変更されると ngOnChanges は呼び出されません。

ngOnInit

最初の ngOnChanges の実行後に呼び出され、一度だけ呼び出されます。主にコンポーネントのその他の初期化操作を実行したり、コンポーネントによって入力された属性値を取得したりするために使用されます。

ngDoCheck

コンポーネントの入力属性が変更されると、ngDoCheck メソッドがトリガーされます。このメソッドを使用して検出をカスタマイズできます論理。 [関連する推奨事項: "

angular チュートリアル "]

注: ngDoCheck では非常に複雑なことを行わず、使用するときにチェック位置をより正確に定義してください。パフォーマンスの問題が発生する可能性があります。マウスクリックイベントやキーボード入力イベントなどのあらゆる変更がngDoCheckをトリガーするためです。

#変更検出

##変更検出戦略

デフォルトの戦略

コンポーネント ツリー内のコンポーネントが変更されると、コンポーネント ツリー全体が検出されます。

• 
  

  onPush 戦略
コンポーネントが変更されたとき、その子コンポーネントが onPush 戦略を使用している場合、その変更は検出されません。検出は、子コンポーネントの @Input 入力プロパティが変更された場合にのみ行われます。

• 
  

ngAfterViewInit および ngAfterViewChecked

ngAfterViewInit フックと ngAfterViewChecked フックは、コンポーネントのテンプレートのすべてのコンテンツがアセンブルされ、コンポーネントのテンプレートが完成した後にインストールされます。 ngAfterViewInit は、ngAfterViewChecked の前にトリガーされます。

ngAfterViewInit フックはコンポーネントの初期化後に 1 回だけトリガーされますが、ngAfterViewChecked フックはコンポーネントが変更されたときにトリガーされるため、このフックの実装は合理化する必要があります。そうしないとパフォーマンスの問題が発生します。

これら 2 つのフックでは、コンポーネントのバインドされたプロパティを変更することはできません。変更しないと、例外がスローされます。

@ViewChild デコレータと ElementRef 要素は

を参照します。実際のアプリケーションでは、これら 2 つの要素を通じてビュー レイヤーの DOM 要素を取得でき、取得した DOM 要素は操作できる。

// .ts 文件中声明
@ViewChild('inputElem')
inputElem: ElementRef;
// 获取Dom元素的值
const value = this.inputElem.nativeElement.value;

// .html 文件中使用
<input nz-input type="text" #inputElem>

ngAfterContentInit と ngAfterContentChecked

これら 2 つのフックは、プロジェクション コンテンツがアセンブルされた後に実行されますが、テンプレート全体はまだアセンブルされていません。この時点では完了しているため、これら 2 つのフックでバインドされたプロパティを変更できます。

プロジェクション

場合によっては、コンポーネント テンプレートのコンテンツを動的に変更する必要がありますが、これらのコンテンツには複雑なビジネス ロジックがなく、変更する必要がありません。一部の HTML フラグメントでは、Angular が提供するプロジェクションと呼ばれる機能を使用できます。 Angular では、ng-content ディレクティブを使用して、親コンポーネント テンプレートのフラグメントをその子コンポーネントに投影できます。

カスタム コンポーネントのタグ内に他のタグをネストできないことに注意してください。ネストできる通常の HTML タグとは異なりますが、プロジェクションを使用してネストを実現できます。

app.component.html

<div class="wrapper">
  <h1>我是父组件</h1>
  <div>这个 div 定义在父组件</div>
  <!-- 将要投影的内容写在子组件的标签之间 -->
  <app-child>
    <div class="header">这个是页头。这个 div 是父组件投影到子组件的。</div>
    <div class="footer">这个是页脚。</div>
  </app-child>
</div>

child.component.html

<div class="wrapper">
  <h1>这是子组件</h1>
  <!-- ng-content是投影点 -->
  <ng-content select=".header"></ng-content>
  <div>这个div定义在子组件中</div>
  <ng-content select=".footer"></ng-content>
</div>

その中で、select を使用します

属性により、ターゲットを絞ったコンテンツの投影が可能になります。ただし、

select 属性に対応する値で指定されるラベル ノードは、コンポーネントの 直接の子ノード である必要があることに注意してください。それ以外の場合、select 属性は無効です。

#ngAfterContentInit および ngAfterContentChecked の概要

#ngAfterContentInit および ngAfterContentChecked フックは、コンテンツがコンポーネントによって投影されるまで呼び出されません。トリガーされる場合、ngAfterContentInit は ngAfterContentChecked の前にトリガーされます。

• コンポーネントにサブコンポーネントがある場合、親コンポーネントの 2 つのフックが最初にトリガーされ、親コンポーネントの投影コンテンツがアセンブルされた後にサブコンポーネントの 2 つのフックがトリガーされます。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がAngular コンポーネントのライフサイクル フックの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。