Angularコンポーネントのライフサイクルの詳しい説明（パート2）

1. ビューフック

ビューフックには、ngAfterViewInit と ngAfterViewChecked の 2 つがあります。

1. ngAfterViewInit および ngAfterViewChecked フックを実装する際に注意すべき点

親コンポーネントが子コンポーネント メソッドを呼び出す例に基づいて、親コンポーネントに ngAfterViewInit フックと ngAfterViewChecked フックを実装します。

これら 2 つのフック メソッドは、コンポーネント テンプレートのすべてのコンテンツが組み立てられ、コンポーネント テンプレートがユーザーに提示された後に呼び出されます。

@ViewChild('child1')
child1:Child1Component; //親コンポーネント内の子コンポーネントの参照を取得する ngOnInit(){
  this.child1.greeting("トム");
}

ngAfterViewInit(){
  console.log("親コンポーネントのビューが初期化されました");
}

ngAfterViewChecked(){
  console.log("親コンポーネントビューの変更検出が完了しました");
}

子コンポーネントにもこれらの2つのフックを実装します

エクスポートクラス Child1Component は OnInit、AfterViewInit、AfterViewChecked を実装します{

  コンストラクタ() { }

  ngOnInit() {
  }

  挨拶(名前: 文字列) {
    console.log("hello" + 名前);
  }

  ngAfterViewInit(){
    console.log("サブコンポーネントのビューが初期化されました");
  }
  
  ngAfterViewChecked(){
    console.log("サブコンポーネントビューの変更検出が完了しました");
  }
}

親コンポーネントの ngOnInit では、子コンポーネントの greeting() メソッドは直接呼び出されません。代わりに、タイマーを介して 5 秒ごとに呼び出されます。

ngOnInit(){
  設定間隔(()=>{
    this.child1.greeting("トム");
  },5000);
} 

要約:

1. 最初にInitが呼び出され、次にチェックされる

1 では、まずサブコンポーネント ビューが初期化され、次にサブコンポーネント ビューの変更検出が完了します。

2. サブコンポーネントは親コンポーネントより先に組み立てられる

2 では、親コンポーネントに 2 つのサブコンポーネントが宣言されているため、サブコンポーネントの初期化アクションが 2 つあることがわかります。サブコンポーネント 1 の初期化と変更検出が完了したら、サブコンポーネント 2 の初期化と変更検出が完了します。親コンポーネントの初期化が完了してから呼び出され、親コンポーネントの変更検出が完了してから呼び出されます。

3. ngAfterViewInit は初期化が完了した後に 1 回だけ呼び出されます。

4. タイマーがメソッドをトリガーすると、2 つの子コンポーネントの変更検出が呼び出され、親コンポーネントの変更検出も呼び出されます。

ビューが変更されていない場合でも、変更検出が呼び出され、ngAfterViewChecked() フックに実装されているすべてのメソッドが呼び出されます。

したがって、パフォーマンスの問題を回避するには、ngAfterViewChecked() フックを簡潔にする必要があります。

2. 変更検出サイクルで組み立てられた後のビューの更新を禁止する

例：

親コンポーネント

abc. に初期化され、テンプレートに表示されるメッセージがあります。

メッセージ:文字列='abc';

親コンポーネントの ngAfterViewInit 内のメッセージ値を変更します。

ngAfterViewInit(){
  console.log("親コンポーネントのビューが初期化されました");
  this.message="def";
} 

エラーが報告されます。 ngAfterViewInit() と ngAfterViewChecked() は両方ともビューがアセンブルされた後にトリガーされるため、コンポーネント内のバインドされたプロパティがこれら 2 つのフックで更新され、コンポーネント ビューの変更がトリガーされると、Angular は例外をスローします。

解決：

コードを別のタイムループ内に配置します。

ngAfterViewInit(){
  console.log("親コンポーネントのビューが初期化されました");
  タイムアウトを設定します(()=>{
    this.message="def";
  },0);
}

2. コンテンツフック

投影関連のフック 2 つ、ngAfterContentInit() フックと ngAfterContentChecked() フックが含まれています。

ngAfterContentInit、ngAfterContentChecked は、ngAfterViewInit、ngAfterViewChecked と似ています。

ngAfterViewInit と ngAfterViewChecked は、コンポーネントのビュー全体が組み立てられた後に呼び出されます。

ngAfterContentInit と ngAfterContentChecked は、投影されたコンテンツが組み立てられた後に呼び出されます。

1. コンテンツフックの呼び出し順序の例

親コンポーネントにngAfterContentInit、ngAfterContentChecked、ngAfterContentInit()を実装する

エクスポートクラス AppComponent は OnInit、AfterViewInit、AfterContentInit、AfterContentChecked を実装します{

ngAfterViewInit(){
  console.log("親コンポーネントのビューが初期化されました");
}

ngAfterContentInit(){
  console.log("親コンポーネント投影コンテンツの初期化が完了しました");
}
ngAfterContentChecked(){
  console.log("親コンポーネント投影コンテンツの変更検出が完了しました");
}

これら3つのインターフェースはサブコンポーネントにも実装されている

エクスポートクラス Child2Component は OnInit、AfterViewChecked、AfterContentInit、AfterContentChecked を実装します{

  コンストラクタ() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
    console.log("サブコンポーネントのビューが初期化されました");
  }
  
  ngAfterContentInit(){
    console.log("サブコンポーネント投影コンテンツの初期化が完了しました");
  }
  ngAfterContentChecked(){
    console.log("サブコンポーネント投影コンテンツの変更検出が完了しました");
  }
} 

ビューを組み立てる際は、まず投影されたコンテンツを組み立て、次に子コンポーネントにビューのコンテンツを組み立て、最後に親コンポーネント自体のコンテンツを追加し、その後親コンポーネントのビューが初期化されます。

2. テンプレートのコンテンツはコンテンツフックで変更できます

テンプレート内のコンテンツはアセンブル後に変更できないため、ビューフックではテンプレートのコンテンツを変更できません。しかし、コンテンツフックでは可能です。

Content フックが呼び出されたときにビュー全体が組み立てられていないため、投影されたコンテンツのみが組み立てられています。

親コンポーネントの ngAfterContentInit フックでメッセージ情報が変更されても、エラーは報告されません。

エクスポートクラス AppComponent は OnInit、AfterViewInit、AfterContentInit、AfterContentChecked を実装します{
メッセージ:文字列='abc';
ngAfterViewInit(){
  console.log("親コンポーネントのビューが初期化されました");
}

ngAfterContentInit(){
  console.log("親コンポーネント投影コンテンツの初期化が完了しました");
  this.message='def';
}
ngAfterContentChecked(){
  console.log("親コンポーネント投影コンテンツの変更検出が完了しました");
}
ngOnInit(){

} 

結論

上記の 4 つのメソッドは属性初期化段階にあります。コンストラクターはオブジェクトを初期化し、ngOnChanges は入力属性を初期化し、ngOnInit は入力属性以外のすべての属性を初期化し、ngDoCheck は変更チェックを実行します。

これら 4 つのメソッドは、コンポーネント全体のすべてのプロパティに割り当てられるべき値が割り当てられるまで実行されます。

コンポーネントはビューのレンダリングを開始し、最初に投影されたコンテンツをレンダリングし、次に ngAfterContentInit および ngAfterContentChecked フック メソッドを呼び出します。

サブコンポーネントがある場合は、サブコンポーネント作成のプロセスが呼び出されます。サブコンポーネントが作成された後、またはサブコンポーネントがない場合は、コンポーネント全体のビューが初期化された後に、ngAfterViewInit および ngAfterViewChecked フック メソッドが呼び出されます。

この時点で、コンポーネント全体が初期化され、コンポーネントがユーザーに表示されるようになり、操作できるようになります。

ユーザーの操作により、Angular の変更検出メカニズムがトリガーされます。変更が検出されると、現在のコンポーネント ツリー内のすべてのアクティブなコンポーネントに実装されているチェック付きのすべてのフック メソッドが呼び出され、現在のコンポーネントの変更がチェックされます。変更によってコンポーネントの入力プロパティが変更された場合は、そのコンポーネントの ngOnChanges も呼び出されます。

ルーティング アドレスの変更によりコンポーネントが破棄されると、ngOnDestory() が呼び出されます。

ストリームのサブスクライブ解除、タイマーのクリアなど、ngOnDestory で参照されているリソースの一部を破棄します。

以上がAngularコンポーネントのライフサイクルの詳しい説明（その2）です。Angularについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください！