Angular勉強会 #4 ライフサイクルフック

ライフサイクルフック

Angularに限らず、多くのViewフレームワークには「ライフサイクル」という考え方がある。これはViewの生成から破棄までの状態遷移を定義したもので、あらゆるView要素を同じライフサイクルで管理することで、効率的かつ拡張しやすいView構造としている。

「拡張しやすさ」を生み出すために、Viewの各ライフサイクルに処理を挿入することができる。これをライフサイクルフックといい、多くのViewフレームワークで標準的に備わっている機能となる。

Angularでは、Viewを管理するComponentにおいて、ライフサイクルフックが可能になっている。

Angular Component のライフサイクル

Angularの公式ドキュメントも参照

ngOnXXX を購読するには

それぞれ対応するInterfaceが用意されているので、Component内でそれを実装すればよい。
呼び出しはAngularが勝手に行ってくれる。

export class ComponentOverviewComponent implements OnInit {
  ngOnInit(): void {}
}

ngOnDestroy は最後の砦

ngOnDestroyはコンポーネントを削除する際のファイナライザのような役割をもち、コンポーネント内で利用しているリソースの後始末を行う必要がある（それを怠るとメモリリークとなり、パフォーマンスに大きな影響を与える）

代表的なものは以下

• DOM要素へのイベントハンドラ（onClickなど）
• Promiseなどのコールバックオブジェクトの登録
• Observable要素の購読
• タイマーの停止