Lifecycle
ngOnChanges
在元件的輸入屬性（@Input）值發生變化時觸發
可能會在 ngOnInit 之前被觸發
時機：當綁定的輸入屬性值改變時
使用場景：需要對輸入屬性的變化做出回應時
ngOnChanges(changes: SimpleChanges) {
// changes 包含了所有發生變化的輸入屬性
console.log(changes);
}ngOnInit
在元件的所有輸入屬性都被初始化完成後觸發
只會執行一次
適合進行初始化工作
ngDoCheck
在任何可能導致視圖或數據變化的動作後觸發
觸發頻率非常高
建議避免使用，因為：
會影響效能
可能導致不必要的檢查
邏輯判斷容易複雜化
Content vs View
Content（內容）
指的是
<ng-content>標籤中投影的內容來自父元件的投影內容
<app-child>
<!-- 這是 content -->
<p>Projected content</p>
</app-child>View（視圖）
指元件模板中的動態元素
元件自己的模板內容
<!-- 這是 view -->
<div>Template content</div>內容相關的生命週期
ngAfterContentInit
在所有投影內容初始化完成後觸發
只執行一次
ngAfterContentChecked
在每次檢查投影內容後觸發
在 ngAfterContentInit 之後以及之後的每次變更檢測後觸發
視圖相關的生命週期
ngAfterViewInit
在元件視圖（及其子視圖）初始化完成後觸發
只執行一次
ngAfterViewChecked
在每次檢查元件視圖後觸發
在 ngAfterViewInit 之後以及之後的每次變更檢測後觸發
ngOnDestroy
在元件被銷毀前觸發
重要用途：
清理訂閱（Subscriptions）
清除定時器
解除事件監聽
防止記憶體洩漏
ngOnDestroy() {
// 清理工作
this.subscription.unsubscribe();
clearInterval(this.interval);
}在用生命週期的時候，避免拼字錯誤導致 TS 認為這只是普通的函式宣告，所以建議要 implement
export class ServerStatusComponent implements OnInit {
// ...
ngOnInit(): void {
// ...
}
}Last updated