コンポーネントには ライフサイクル という概念があって、それはコンポーネントの生成直後から破棄されるまでの流れを示している。
で、コンポーネントにはこのライフサイクルの変化、つまりコンポーネントの状態の変化にそって実行される ライフサイクルメソッド が用意されている。
本記事では Angular コンポーネントのライフサイクルメソッドについてみていく。
関連記事
- [Angular] Angular CLI によるコンポーネントの生成
- [Angular] ライフサイクルメソッドをみる(ngDoCheck)
- [Angular] ライフサイクルメソッドをみる(ngAfterContentInit と ngAfterContentChecked)
- [Angular] ライフサイクルメソッドをみる(ngAfterViewInit と ngAfterViewChecked)
ライフサイクルメソッドの種類
本家のLifecycle Hooks より、ライフサイクルメソッドには次の種類がある。
この図は上から順に実行される順序を示していて、それぞれを簡単に説明すると...
| ライフサイクル | 説明 | 備考 |
|---|---|---|
| ngOnChanges | @Input 経由で入力値が設定されたときに実行される | @Input は別のコンポーネントとのデータバインド示すデコレータ(注1) |
| ngOnInit | コンポーネントの初期化時に実行される | 最初に ngOnChanges が実行されたあとに一度だけ実行される(注2) |
| ngDoCheck | コンポーネントの状態が変わったことを検知したら実行される | いわゆる Change Detection が走るごとに実行される(注3) |
| ngAfterContentInit | 外部コンテンツを初期化したときに実行される | |
| ngAfterContentChecked | 外部コンテンツの変更を検知したときに実行される | |
| ngAfterViewInit | 自分自身と子コンポーネントのビューの初期化時に実行される | |
| ngAfterViewChecked | 自分自身と子コンポーネントのビューが変更されたときに実行される | |
| ngOnDestroy | コンポーネントが破棄されるときに実行される |
- 注1
- コンポーネントは入れ子にすることができて、@Input デコレータは別のコンポーネント(親コンポーネント)から値を受け取りたいケースで使用する
- 注2
- こちら で初期化処理は ngOnInit で行うと記載したのはこれが理由
- @Input で設定された値が処理されたあとに ngOnInit が実行されるので、もし @Input に関係する処理を初期化時に行いたい場合、コンストラクタでは早すぎる(コンストラクタでは @Input の処理が行われていない)
- 上記より Angular コンポーネントでは初期化処理はコンストラクタではなく ngOnInit で行うのが一般的である
- 注3
- Change Detection については こちらの記事 が詳しい
以降、各ライフサイクルメソッドについてみていく。
ngOnChanges
ngOnChanges は 子コンポーネントで @Input デコレータで修飾されたプロパティが親コンポーネントで変更されるたびに実行される。
実際にコードを書いてみる。
親コンポーネント
テンプレート
ブラウザからの入力フォームを用意する。
<label for="inputText">入力項目:</label>
<input id="inputText" name="inputText" type="text" [(ngModel)]="childHogeValue" />
<app-hoge-hoge [hogeInputValue]="childHogeValue"></app-hoge-hoge>
ポイントは
<app-hoge-hoge [hogeInputValue]="childHogeValue"></app-hoge-hoge>
で、<app-hoge-hoge></app-hoge-hoge> で子コンポーネントを指定していることと、[hogeInputValue]="childHogeValue" で子コンポーネントにデータを渡していること。
ここで hogeInputValue は子コンポーネントで定義されている @Input デコレータで修飾されたプロパティで、childHogeValue は親コンポーネントである自分自身が定義しているプロパティである。
クラス
こちらはテンプレートで用意した入力フォームで入力された値を受け取るプロパティを用意するだけの単純なコードとなる。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
childHogeValue: String = 'initial value';
}
注意
app.module.ts で FormsModule を import していないとビルドエラーとなる。
コードでいうと以下のような感じ。
// これが必要
import { FormsModule } from '@angular/forms';
// で、imports にもセットする
@NgModule({
...
imports: [
...
FormsModule
],
...
})
子コンポーネント
テンプレート
子コンポーネントであるこちらのテンプレートは親コンポーネントから渡されたデータを表示するだけ。
<p>
親コンポーネントで入力された値は... {{hogeInputValue}}
</p>
クラス
ngOnChanges を確認するためのキモとなる部分。ここで親コンポーネントからデータを受け取るためのプロパティを定義し、ngOnChanges の確認を行う。
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-hoge-hoge',
templateUrl: './hoge-hoge.component.html',
styleUrls: ['./hoge-hoge.component.css']
})
export class HogeHogeComponent implements OnInit, OnChanges {
@Input() hogeInputValue: String;
constructor() {
console.log('[constructor] execute');
}
ngOnChanges(changes: SimpleChanges) {
console.log('[ngOnChanges] execute');
// SimpleChanges を使って変更前の値と変更後の値、そして変更されているかをログ出力する
for (const prop in changes) {
const change = changes[prop];
console.log(`${prop}: ${change.firstChange}, ${change.previousValue} => ${change.currentValue}`);
}
}
ngOnInit() {
console.log('[ngOnInit] execute');
}
}
ポイントを順にみていく。
まずは
import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
で、ライフサイクルメソッドである ngOnChanges のインターフェスを import する。
また SimpleChanges は ngOnChanges メソッドで 新旧のプロパティ値を取得する ためのオブジェクトである。
次は
@Input() hogeInputValue: String;
で、こちらは親コンポーネントからデータを受け取るためのプロパティとして @Input デコレータを設定して定義している。
最後に
ngOnChanges(changes: SimpleChanges) {
console.log('[ngOnChanges] execute');
// SimpleChanges を使って変更前の値と変更後の値、そして変更されているかをログ出力する
for (const prop in changes) {
const change = changes[prop];
console.log(`${prop}: ${change.firstChange}, ${change.previousValue} => ${change.currentValue}`);
}
}
となる。
前述の SimpleChanges を引数として受け取っており、これには {プロパティ名:SimpleChangeオブジェクト} のオブジェクトがセットされて渡ってくる。
今回のコードでいうと、実行時には
{
'hogeInputValue':SimpleChangeオブジェクト
}
となる。
そして SimpleChangeオブジェクト には次のプロパティがセットされている。
{
'currentValue': 変更後の値,
'previousValue': 変更前の値,
'firstChange': 最初の値設定であるかの真偽値
}
ngOnChanges 内の for 文ではこの SimpleChanges をループで回し、SimpleChangeオブジェクトのプロパティ値をログ出力している。
実行結果を確認する
実際にアプリを起動して確認した結果を示す。
-
まず初期値として設定されている「initial value」が表示されている
-
次に入力ボックスに「change value」を入力
(後述のログ出力時に見栄えをよくするため、ここで「change value」は一文字ずつの入力ではなくコピー&ペーストで入力した)
-
実行時のログ
-
上記ログからわかること
-
アプリ起動時は constructor -> ngOnChanges -> ngOnInit の順で実行されている
-
起動直後、@Input デコレータが設定された hogeInputValue は 「undefined」 から 「initial value」 に変更されている
-
上記は最初の値設定であることから、firstChange には true がセットされている
-
「change value」 を入力すると ngOnChanges が実行されている
-
値は「initial value」から「change value」に変更されている
-
2回目以降の設定となるので firstChange には false がセットされている
ngOnInit
ngOnInit については 前項の ngOnChanges のログからわかるように
- constructor -> ngOnChanges のあとに実行される
- ただし一度しか実行されない
というのが全てだと思う。
つまり @Input デコレータで修飾されたプロパティに関連する初期処理を行いたい場合、
- constructor では早すぎるため、ngOnChanges か ngOnInit で行う必要がある
- だが ngOnChanges だと値が変更されると毎回実行されてしまうため初期処理にはそぐわない
- したがって、当該プロパティに関連する初期処理は ngOnInit で行う
ことになる。
で、扱うプロパティによって初期処理を constructor や ngOnInit で振り分けるのは煩雑だし気持ち悪い。
というところから、
- コンポーネントにおける初期処理は ngOnInit で統一する
のがシンプルで良いと思う。
ngOnDestroy
ngOnDestroy については手抜きながら 本家のOnDestroy() を抜粋させていただく。
Put cleanup logic in ngOnDestroy(), the logic that must run before Angular destroys the directive.
This is the time to notify another part of the application that the component is going away.
This is the place to free resources that won't be garbage collected automatically. Unsubscribe from Observables and DOM events. Stop interval timers. Unregister all callbacks that this directive registered with global or application services. You risk memory leaks if you neglect to do so.
(意訳: ngOnDestroy() では Angular がディレクティブを破壊する前に、メモリリークのリスクを回避するための処理、例えば Observables から subscribe を解除したり DOM イベントの解放、interval timers の停止、ディレクティブに登録されたコールバック処理の解除といったクリーンアップを実装する。)
まとめにかえて
ngOnChanges のメソッドが実行される流れをみたことで、constructor から ngOnInit が実行されるまでの順序を確認できた。また ngOnInit で初期処理を記述する理由についても確認できた。
ngOnDestroy については今後活用するケースがあれば、その際に記事にしたい。
長くなったので今回はここまでで区切りとして、他のライフサクルメソッドについては別の記事で扱う。