前言

回到基本的概念，今天來討論一下 Angular Lifecycle Hooks，雖然前面我們已經實作了租戶管理元件，但是對於 Angular 元件基本的生命週期還是應該要有基本的瞭解。當 Angular 透過建構函式來實例化一個元件或指令時，Angular 就會在該實例生命週期內實現那些 Hook 裡的方法。

Angular 會按以下順序執行 Hooks 方法

ngOnChanges

在 ngOnInit 之前執行一次，或者是當元件 @Input 綁定的值發生變化時觸發，注意，ngOnChanges() 可能發生非常頻繁的觸發，所以在這裡執行的任何操作都可能會顯著影響效能。

當元件沒有 @Input 或者你使用它時沒有提供任何輸入屬性，那麼 Angular 就不會呼叫 ngOnChanges()。

ngOnInit

用來初始化頁面內容，顯示數據綁定，在第一次 ngOnChanges() 完成後呼叫，只執行一次，而且即使沒有呼叫過 ngOnChanges()，也仍然會呼叫 ngOnInit()，大部分的初始化程式都建議在 ngOnInit() 週期執行。

ngDoCheck

在每個 Angular 檢測變化的週期中呼叫，最快會發生在首次 ngOnChanges() 和 ngOnInit() 之後，可以在這裡面額外撰寫程式來處理變更偵測無法偵測到的部分。

ngAfterContentInit

只用於 Component，當頁面有使用 ng-content 進行元件內容投射，在首次 ngDoCheck 後發生且只會執行一次。

ngAfterContentChecked

只用於 Component，每當 Angular Change Detection 檢查完被投影到元件或指令中的內容之後呼叫。ngAfterContentInit() 和每次 ngDoCheck() 之後呼叫。

ngAfterViewInit

只用於 Component，當 Angular 初始化完元件檢視及其子檢視或包含該指令的檢視之後呼叫，即第一次 ngAfterContentChecked () 之後呼叫，只調用一次。

ngAfterViewChecked

只用於 Component，每當 Angular 做完元件檢視和子檢視或包含該指令的檢視的變更檢測之後呼叫，即 ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫。

ngOnDestory

在 Angular 銷燬指令或元件之前立即呼叫。在這邊可 取消訂閱Observable 或清空變數。

Lifecycle hooks 是由 Angular 官網提供的範例，可藉由實際的操作體驗一下這些 Lifecycle Hooks。

在使用 Angular Lifecycle Hooks 時注意

constructor 與 ngOnInit

雖然 constructor 最元件中最快執行的，但是要注意 constructor 裡不是所有數據都已經存在，如 @Input，@ContentChild，@ContentChildren，@ViewChild，@ViewChildren 在執行 constructor 的時候並不存在，所以有用到這些屬性的代碼需要放在 ngOnInit。

ngOnChanges 與 ngDoCheck

ngOnChanges() 是在 @Input 的值發生變化時觸發，而 ngDoCheck() 則在每次 Change Detection 的時候觸發或是在狀態發生變化 Angular 無法捕獲時被觸發。ngDoCheck() 被觸發的頻率非常高，代碼需要儘量精簡避免導致性能問題。

ngAfterContentInit 與 ngAfterViewInit

跟 ng-content 相關的用 ngAfterContentInit()，跟當前 component 或其子元件相關的就用 ngAfterViewInit。

ngAfterContentChecked 與 ngAfterViewChecked

都在 Change Detection 執行，使用的時候也需要特別謹慎，避免造成性能問題。

結論

Angular 在執行元件時的生命週期，從建立，檢測元件及綁定屬性是否更新，到元件從 DOM 中銷毀，構成一個元件完整的生命週期。
生命週期伴隨著變更檢測 Change Detection，Angular 會檢查資料繫結屬性何時發生變化，並更新檢視和元件實例。當 Angular 實例化元件類別並渲染元件 View 時，元件的生命週期就開始了，而當 Angular 銷燬元件實例並從 DOM 中移除它渲染的範本時，生命週期就結束了，Angular 以這些生命週期，在變更檢測過程中響應更新，並在刪除實例之前進行清理。

下一篇回到 my-app 專案，做些首頁上的需求吧。

參考

Lifecycle hooks

Lifecycle stackblitz