入力プロパティ変更時のngOnChanges
ngOnChangesライフサイクルフックは、コンポーネントの入力プロパティが変更されたときに呼び出されます。図4のサンプル(002-onchanges)で説明します。
テキストボックス文字列を変更すると、入力プロパティの変更でngOnChangesが実行され、変更されたプロパティ名と変更前後の値がログ出力されます。
コンポーネントの実装はリスト4のようになります。
export class LifeCycleComponent implements OnChanges {
// タグのinput1属性で指定するプロパティ ...(1)
@Input() input1:string;
// ライフサイクルフック ...(2)
ngOnChanges(changes: SimpleChanges) {
// 変更されたプロパティ名propNameごとに処理 ...(3)
for (let propName in changes) {
// 変更内容のSimpleChangeオブジェクトを取得
let change : SimpleChange = changes[propName];
// ログ出力
console.debug("変更されたプロパティ名:" + propName);
console.debug("変更前の値:" + change.previousValue);
console.debug("変更後の値:" + change.currentValue);
}
}
}
(1)の@Inputデコレーターで、コンポーネントタグの[input1]属性で指定された入力プロパティinput1を参照します。ngOnChangesの実装は(2)です。引数のSimpleChangesオブジェクトには、変更されたプロパティ名をキーとして、プロパティの変更前後の値が格納されたSimpleChangeオブジェクトが格納されます。(3)のforループで、プロパティ名と変更前後の値を取り出してログ出力します。
生成と破棄に対応するngOnInitとngOnDestory
ngOnInitライフサイクルフックはコンポーネントの生成時に、ngOnDestroyライフサイクルフックは破棄時に、それぞれ実行されます。
ngOnInitはngOnChangesより後に実行されるため、ngOnChangesより先に実行されるコンストラクターでは参照できない入力プロパティをngOnInitで参照できます。Angular 2のドキュメントでは、コンストラクターでは最低限の変数初期化を行い、通信などの重い処理はngOnInitで実行することを推奨しています。
また、コンポーネント破棄時の後始末が必要な場合、ngOnDestroyに実装します。Angular 2のドキュメントでは、ngOnDestoryで行う処理の例として、Observableの購読解除(unsubscribe)やタイマー処理の停止、コールバック関数の解放が示されています。
変更検知ごとに実行されるngDoCheck
ngDoCheckライフサイクルフックは、何らかの変更を検知した都度に実行されます。実装例を図6のサンプル(003-docheck)で説明します。
このサンプルでは、画面上のテキストボックス値を変えるごとに、その内容をデバッグログに出力します。
コンポーネントの実装はリスト5のようになります。
// テキストボックスへの入力値 ...(1)
input1:string="";
input2:string="";
// ライフサイクルフック ...(2)
ngDoCheck() {
console.debug("DoCheck:input1=" + this.input1);
console.debug("DoCheck:input2=" + this.input2);
}
(1)の変数input1、input2には、双方向データバインディングによって、画面上のテキストボックスに入力された値が反映されます。ngDoCheckの実装は(2)で、変数input1とinput2の値をデバッグログに出力します。
