Lifecycle Hooks
所有的 Angular component 都有著生命週期,從 Angular 實例化組件類別時,該組件便開始走生命週期的流程,除了建立與銷毀,生命週期中也會有檢測改變的一些 hooks ,用來檢查繫結的屬性是否發生變化而決定 component 是否需要跟著改變,而生命週期會結束在組件被銷毀時,同時也會將其從應用程序中的 DOM 移除。
Angular component 的生命週期 hook 總共有八個,完整的生命週期會跑過大部分的 hooks,可以利用這些 hooks 在一些特定或者關鍵的時間點來對事件或值等進行操作。
![angular lifecycle hooks](./angular-lifecycle-hook.png)
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>
標籤):
|
|
於初始化之後,第一次的 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。