Lifecycle Hooks

所有的 Angular component 都有著生命週期，從 Angular 實例化組件類別時，該組件便開始走生命週期的流程，除了建立與銷毀，生命週期中也會有檢測改變的一些 hooks ，用來檢查繫結的屬性是否發生變化而決定 component 是否需要跟著改變，而生命週期會結束在組件被銷毀時，同時也會將其從應用程序中的 DOM 移除。

Angular component 的生命週期 hook 總共有八個，完整的生命週期會跑過大部分的 hooks，可以利用這些 hooks 在一些特定或者關鍵的時間點來對事件或值等進行操作。

constructor

不算是生命週期 hook 的一部分，但是會是最先被執行的，實例化（建立與初始化）此類別，並在類別建立時最先被執行，為 Angular 無法控制的，且在此階段時 component 尚未被初始化，通常只用來初始化參數，或者依賴注入，不做其他邏輯或判斷。

ngOnChanges

此 hook 只有在組件有 Input 值時（即有父組件傳值進入）才會被呼叫，呼叫的時間點會是在 ngOnInit() 之前，以及當所綁定的 input 值有所變化時。

這個方法可以接收一個 SimpleChange 物件，包含當前（currentValue）以及先前（previousValue）的值，初始化之前的 SimpleChange 內 previousValue 的值會是 undefined ，因為先前尚未有任何值（尚未改變任何值）。

如果組件沒有 input 值 Angular 將不會呼叫此 hook，且此 hook 可能會極度頻繁的被呼叫，所以在這個函示中的操作都需要注意效能。

ngOnInit

在 Angular 完成初始化所有數據綁定以及 component 或 directive 的設定之後會被呼叫，此方法只會被呼叫一次，並且在第一次的 ngOnChanges() 之後被呼叫，但是無論該組件的 ngOnChanges() 有沒有被呼叫，在元件初始化後此方法都會被呼叫。

ngDoCheck

可以偵測到 Angular 無法偵測的一些變化，包含狀態的改變、事件的產生，也會在 Angular 檢查任何更變之後呼叫，可以用來強迫檢測 binding 內容等，通常用在需要手動偵測或修改某些東西的時候。

會在 ngOnInit() 以及 ngOnChanges() 後被呼叫。

此 hook 呼叫的頻率非常高，如果要使用也必需要注意程式碼的效能。

ngAfterContentInit

會在外部內容被投射進入組件後呼叫，這裡的 content 指的就是 ng-content，也就是放在 component 標籤內的元素（以下例子為 <p> 標籤）：

1
2
3

<my-component>
  <p>Hello world</p>
</my-component>

於初始化之後，第一次的 ngDoCheck() 之後被呼叫，並且只會呼叫一次。

ngAfterContentChecked

會在 Angular 檢查 directive 或 component 的 content 後呼叫，呼叫的時機點為 ngAfterContentInit() 之後，以及每次的 ngDoCheck() 之後。

ngAfterViewInit

此 hook 會在 Angular 完成 component 以及 child component 的視圖（view）渲染之後呼叫，也就是畫面呈現（render）之後，如果有需要對 DOM 元素作任何操作必須要在此 hook 內，例如使用 @ViewChild 來獲取元素，在 ngAfterViewInit() 之前將無法取得元素內容，因為視圖尚未載入完成。

呼叫的時機點為第一次的 ngAfterContentChecked() 之後，並且只會呼叫一次。

ngAfterViewChecked

在 Angular 完成初始化 View 之後檢查 component 以及 child component 的視圖，會在 ngAfterViewInit() 以及每次的 ngAfterContentChecked() 後被呼叫。

ngOnDestroy

會在 component 被銷毀前呼叫，用於清理 component 或者 directive，通常會用在取消訂閱 observable 以避免 memory leaks。

Reference

Angular Lifecycle hooks

Angular 生命週期(Life cycle)