← Angular コース
26. ライフサイクルフック — ngOnInit と ngOnDestroy
コンポーネントには「生まれてから消えるまで」の段階があり、その節目で呼ばれるメソッドをライフサイクルフックと呼びます。ngOnInit() は入力値が揃って表示の準備が整った直後に1回だけ呼ばれ、ngOnDestroy() は画面から取り除かれる直前に呼ばれます。クラスにメソッドとして定義しておくだけで、Angularが適切なタイミングで自動的に呼び出します。
実務では、初期データの取得を ngOnInit に、後片付けを ngOnDestroy に書きます。constructor との違いがポイントで、constructor は依存性の注入を受け取る場所、ngOnInit は input() で渡された値が確定したあとの初期化処理を書く場所、と役割を分けて考えます。コンストラクタの時点では入力値はまだ届いていないことがあるためです。
つまずきやすいのは購読の解除です。subscribe したまま放置するとコンポーネントが消えても処理が動き続け、メモリリークの原因になります。ngOnDestroy で unsubscribe() するか、新しいAngularでは takeUntilDestroyed() を使って自動で後始末する習慣をつけましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';
@Component({
selector: 'app-timer',
template: '<p>経過: {{ seconds }} 秒</p>',
})
// implements で「どのフックを使うか」を型で明示する
export class TimerComponent implements OnInit, OnDestroy {
seconds = 0;
private sub?: Subscription;
ngOnInit() {
// 表示準備が整ったあとに初期化処理を始める
this.sub = interval(1000).subscribe(() => this.seconds++);
}
ngOnDestroy() {
this.sub?.unsubscribe(); // 消える前に購読を解除する
}
}