Angular2のLifecycle Hooksを理解する

スポンサーリンク

Angular2のディレクティブやコンポーネントには、Lifecycle Hooksという仕組みがあり、
コンポーネントが生成や破棄されるタイミングでコールバックを設定できます。

コンポーネントが持つデータの更新や、ビューを更新したという変更を検知できるので、
アプリケーション構築の強力な味方になります。

今回はLifecycle Hooksの基本的な仕組みを紹介します。

Lifecycle Hooksとは

冒頭でも説明したように、Lifecycle Hooksとは、
ディレクティブやコンポーネントが変化(生成・変更・破棄)するタイミングで、コールバックを設定できる仕組みです。

例えば、次のようなケースでは非常に重宝します。

  • 親コンポーネントの初期化時に、子コンポーネントとして存在するビューのDOM要素を取得する。
  • Ajaxで取得したデータを更新した時に、何かしらの処理をする。
  • メモリリーク回避のために、コンポーネントが削除されるタイミングで、コンポーネント内で設定したイベントハンドラも一緒に削除する。

この仕組みがあるおかげで、コンポーネント自身が変更検知をしてくれるため、コールバックの設定がものすごく簡単です。
このライフサイクルに関わる処理は頻繁に使うので、Angular2でのアプリケーション構築では、Lifecycle Hooksの理解が不可欠と言えます。

ライフサイクルの種類

Lifecycle Hooksには、ディレクティブとコンポーネント共通で実行されるものと、コンポーネントでのみ実行されるものがあります。

ディレクティブとコンポーネントで共通

Hook 目的
ngOnInit @Input()でデータバインドされた入力値を初期化後に実行されます。
ngOnChanges @Input()でデータバインドされた入力値を設定した後に実行されます。この処理は入力値が変更するたびに実行され、現在・過去の変更オブジェクトを受け取ります。
ngDoCheck 検出と変更時の動きのチェック。すべての変更を検出すると呼ばれます。
ngOnDestroy ディレクティブ・コンポーネントを破棄する前に呼ばれます。

コンポーネントのみ

Hook 目的
ngAfterContentInit コンポーネントのビューに外部コンテンツを投影された後に実行されます。
ngAfterContentChecked コンポーネントのビューに投影された外部コンテンツの変更をチェックした後に実行されます。
ngAfterViewInit 子コンポーネントのビューを生成した後に実行されます。
ngAfterViewChecked 子コンポーネントのビューの変更をチェックした後に実行されます。

Lifecycle Hooksの使い方

例として、ngOnInit を見てみましょう。

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

@Component({...})

export class PeekABoo implements OnInit {

  constructor(private _logger:LoggerService) { }

  ngOnInit() {
    this._logIt(</span><span class="nx">OnInit</span><span class="err">);
  }

  protected _logIt(msg:string){
    this._logger.log(#</span><span class="nx">$</span><span class="p">{</span><span class="nx">nextId</span><span class="o">++</span><span class="p">}</span> <span class="nx">$</span><span class="p">{</span><span class="nx">msg</span><span class="p">}</span><span class="err">);
  }
}
  1. @angular/core から OnInit をインポートします。
  2. コンポーネントのクラスを定義する際に、OnInit インターフェースを実装します。
  3. OnInit インターフェースを実装すると、ngOnInit メソッドを定義できるようになります。

先ほど紹介した各種類は、それぞれ上記と同じ実装方法になります。
インポートするインターフェースは、メソッド名の ng という接頭辞を除いた名前になっています。

インターフェースを適用しないかぎり、Lifecycle Hooksが実行されることはありません。

ライフサイクルの順序

Lifecycle Hooksは次の順番で実行されます。

  1. ngOnChanges
  2. ngOnInit
  3. ngDoCheck
  4. ngAfterContentInit
  5. ngAfterContentChecked
  6. ngAfterViewInit
  7. ngAfterViewChecked
  8. ngOnDestroy

簡単なデモを用意しました。
コードと実行結果を見比べてもらえば、わかりやすいかと思います。

参考

スポンサーリンク