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

はじめに

Angularのコンポーネントには、ライフサイクルという概念がある。
Angularで開発をしている以上、コンポーネントのライフサイクルについては必ず頭に入れておきたい。

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

コンポーネントのライフサイクルについて説明する前に、コンポーネントについて理解する。
↓コンポーネントについて以下の記事で簡単に解説しているので参考までに。
Angular コンポーネントとは

コンポーネントとは、ビュー(View)を定義し、制御するものであると上記の記事で説明した。

コンポーネントはAngularアプリケーションの中心的な部分であり、アプリケーションの表示やインタラクションの多くがコンポーネントによって管理される。

コンポーネントは生成された後、プロパティ・子コンポーネントの変化を受けて状態(表示)を変化させていき、非表示になるタイミングで破棄される。

↑このような生成から破棄までの流れのことを、コンポーネントのライフサイクルという。

では、ライフサイクルの中身を見ていく。

ライフサイクルの流れ

コンポーネントのライフサイクルは以下の図のような順序で処理される。

コンストラクター (constructor)

• コンポーネントのインスタンスが生成される
• 依存性の注入（Dependency Injection）などが行われる

ngOnChanges

• @Input で受け取るプロパティの値が変化したときに実行される
• 初回の値変更時にも呼ばれる

ngOnInit

• コンポーネントの初期化処理を実行
• @Input の値を受け取った後に呼ばれる

ngDoChecked

• Angularの変更検知 (Change Detection) が実行されるたびに呼ばれる
• 差分があるかどうかをチェックするタイミング

ngAfterContentInit

• コンテンツ投影 (Content Projection) が完了したときに呼ばれる
• ng-content で受け取った内容の初期化が完了した後の処理に使用

ngAfterContentChecked

• コンテンツの変更を検知するたびに呼ばれる
• ngAfterContentInit の後に呼ばれ、変更がないかチェック

ngAfterViewInit

• 子コンポーネントやビューの初期化が完了したときに呼ばれる
• ViewChild や ViewChildren で取得した要素を操作できる

ngAfterViewChecked

• ビューが変更されるたびに呼ばれる
• ngAfterViewInit の後に呼ばれ、更新があるかチェック

ngOnDestroyed

• コンポーネントが破棄される直前に実行
• メモリリークを防ぐための後処理（イベントリスナーの解除、タイマーのクリアなど）を行う

まとめ

Angularのコンポーネントは、生成から破棄までのライフサイクルを持ち、各フェーズで特定の処理が実行される。constructor でのインスタンス生成から始まり、ngOnInit での初期化、変更検知 (ngDoChecked など)、ビューやコンテンツの処理 (ngAfterViewInit など) を経て、ngOnDestroy で後処理を行う。
今回、ライフサイクルについて概要レベルで説明したが、今後、各フェーズの詳細について解説したい。