ライフサイクルフックは、Angular がコンポーネントのライフサイクルの特定の瞬間 — 作成、入力の変更、レンダリング、破棄 — に呼び出すメソッドです。コンポーネントクラスにインターフェース メソッドを追加することで実装します。
主なフックの順序
ts
{ , , , , } ;
({ ... })
, , {
() {
}
() {
}
() {
}
}
constructor → DI happens; inputs NOT yet available
ngOnChanges → when @Input values are set/changed
ngOnInit → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck → every change detection run (custom change detection)
ngAfterContentInit → projected content (<ng-content>) initialized
ngAfterViewInit → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked → after each view check
ngOnDestroy → before removal ★ (unsubscribe, clear timers)
ngOnInit() {
this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
this.subscription.unsubscribe(); // prevent memory leaks!
clearInterval(this.timer);
}
ngOnInit — 初期化とデータ取得の標準的な場所です(コンストラクタとは異なり、ここで @Input が利用可能です)。ngAfterViewInit — 子ビューと @ViewChild 参照が存在する場合。ngOnDestroy — クリーンアップ: Observable からアンサブスクライブ、タイマーをクリア、リスナーを削除。コンストラクタは DI のみを行うべきです。入力はまだバインドされていません。ngOnInit は Angular がコンポーネントとその入力をセットアップした後に実行されます — スタートアップロジックの正しい場所です。
ライフサイクルフックを使うと、正しい時間に ロジック を実行できます — ngOnInit で初期化し、ngAfterViewInit でレンダリングされたビューにアクセスし、特に**ngOnDestroy でクリーンアップ**します(Observable からアンサブスクライブすることが Angular でメモリリークを避ける #1 の方法です)。
各フックの順序と役割を知ることは、正しいデータ取得、DOM アクセス、リソース管理に不可欠です。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する