Angular のコンポーネントのライフサイクルに関する簡単な説明

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

環境:

• Angular CLI: 11.0.6

• 角度: 11.0.7

• ノード: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 概要

Angular がコンポーネント クラスをインスタンス化し、コンポーネント ビューとそのサブビューをレンダリングするとき、コンポーネント インスタンスのライフサイクルが始まります。ライフサイクルには常に変更検出が伴います。データにバインドされたプロパティが変更されたときに Angular がチェックし、必要に応じてビューとコンポーネントのインスタンスを更新します。ライフサイクルは、Angular がコンポーネント インスタンスを破棄し、レンダリングされたテンプレートを DOM から削除すると終了します。ディレクティブには、Angular が実行中にインスタンスを作成、更新、破棄するのと同様のライフサイクルがあります。 [関連チュートリアルの推奨事項: "angular チュートリアル

"]

アプリケーションはライフ サイクル フック メソッドを使用して、コンポーネントまたはディレクティブのライフ サイクルで主要なイベントをトリガーし、必要に応じて新しいインスタンスを初期化できます。変更検出、変更検出中の更新への応答、インスタンスを削除する前のクリーンアップを行います。

2. ライフサイクルとシーケンス

• ngOnChanges(): Angular がデータ バインディングの入力プロパティを設定またはリセットするときに応答します。

• ngOnInit(): Angular が最初にデータ バインディングを表示した後、ディレクティブ/コンポーネントを初期化し、ディレクティブ/コンポーネントの入力プロパティを設定します。

• ngDoCheck(): 変更検出が実行されるたびに ngOnChanges() の後に呼び出され、変更検出が初めて実行されるときに ngOnInit() の後に呼び出されます。

• ngAfterContentInit(): Angular が外部コンテンツをコンポーネント ビューまたはディレクティブが配置されているビューに投影した後に呼び出されます。

• ngAfterContentChecked(): ngAfterContentInit() と ngDoCheck() が呼び出されるたび

• #ngAfterViewInit(): Angular がコンポーネント ビューを初期化したとき、およびこのディレクティブを含むサブビューまたはビューの後に呼び出されます。

• ngAfterViewChecked(): ngAfterViewInit() とすべての ngAfterContentChecked() の後に呼び出されます。

• ngOnDestroy(): Angular がディレクティブ/コンポーネントを破棄してリソースをクリーンアップして解放する前に毎回呼び出されます。

3. ライフ サイクル イベントへの応答

Angular イベントで定義された 1 つ以上のライフ サイクル フック インターフェイスを実装することで、コンポーネントに応答します。命令のライフサイクル内で。各インターフェイスには固有のフック メソッドがあり、その名前はインターフェイス名と ng プレフィックスで構成されます。例:

@Component()
export class DemoComponent implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
      // do something here
  }
}

ログイン後にコピー

手順:

1) ライフ サイクル フック インターフェイスを通じてライフ サイクル内のイベントに応答するには、特定のクラス名の後にフックインターフェイスを追加します。次に、実行するコード内にフック関数を定義します。たとえば、ngOnInit() はインターフェイス OnInit

に対応します。

2) <!-- -->export class DemoComponentimplements OnInit, OnDestroy {

4 など、複数のフック インターフェイスを実装できます。サイクル イベント

4.1. 初期化イベント ngOnInit()

ngOnInit() メソッドを使用して、次の初期化タスクを実行します。

• ##ロジックは少し複雑なので、コンストラクターに配置されるロジックには適していません

• #初期化時のデータ アクセス ロジック

• 親コンポーネント (@Input) によって渡されたパラメーターに基づいて、初期化が必要なロジックを処理します。

4.2. インスタンスの破棄 ngOnDestroy( )

ngOnDestroy() にクリーンアップ ロジックを配置すると、Angular が命令を破棄する前にこのロジックが確実に実行されます。次のロジックを ngOnDestroy() に組み込むことができます:

• オブザーバブルと DOM イベントのサブスクライブを解除します。

• インターバルタイマーを停止します。

• このコマンドにより、グローバルまたはアプリケーション サービスに登録されているすべてのコールバックを登録解除します。

• 他の占有リソースを解放します。

5. 概要

• ライフサイクル イベント フック関数を使用します。実装を忘れないでください。クラス名の後ろ

  対応するインターフェース、そうでない場合は有効になりません;

• 初期化コード、どのコンストラクターを置くか、どのコンストラクターを置くか ngOnInit() を区別します;

• 合理化されたフック イベント メソッドを使用すると、パフォーマンスの問題を回避できます。

• ngOnChanges() は非常に頻繁に発生するため、複雑なロジックを追加するとパフォーマンスに影響します。

プログラミング関連の知識について詳しくは、プログラミング入門

をご覧ください。 ！ ###

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