Angular 2-ライフサイクルフック

Angular 2アプリケーションは、プロセスセット全体を通過するか、アプリケーションの開始から終了までライフサイクルを持っています。

次の図は、Angular 2アプリケーションのライフサイクルにおけるプロセス全体を示しています。

以下は、各ライフサイクルフックの説明です。

ngOnChanges -データバインドプロパティの値が変更されると、このメソッドが呼び出されます。
ngOnInit -これは、Angularがデータバインドプロパティを最初に表示した後、ディレクティブ/コンポーネントの初期化が行われるたびに呼び出されます。
ngDoCheck -これは、Angularが単独で検出できない、または検出できない変更を検出および処理するためのものです。
ngAfterContentInit -これは、Angularが外部コンテンツをコンポーネントのビューに投影した後に応答して呼び出されます。
ngAfterContentChecked -これは、Angularがコンポーネントに投影されたコンテンツをチェックした後に応答して呼び出されます。
ngAfterViewInit -これは、Angularがコンポーネントのビューと子ビューを初期化した後に応答して呼び出されます。
ngAfterViewChecked -これは、Angularがコンポーネントのビューと子ビューをチェックした後に応答して呼び出されます。
ngOnDestroy -これは、Angularがディレクティブ/コンポーネントを破棄する直前のクリーンアップフェーズです。

次に、1つのライフサイクルフックを実装する例を示します。 app.component.ts ファイルに、次のコードを配置します。

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<div> {{values}} </div> '
})

export class AppComponent {
   values = '';
   ngOnInit() {
      this.values = "Hello";
   }
}

上記のプログラムでは、 ngOnInit ライフサイクルフックを呼び出して、 this.values パラメーターの値を「Hello」に設定する必要があることを具体的に示しています。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

こんにちは

Angular2-lifecycle-hooks

Angular 2-ライフサイクルフック