Angular 生命週期(Life cycle)

前言

主要有 8 個生命週期
若是用 cli 創建 Component,預設會自動在 class 帶上 implements OnInit ,但就算不寫也無妨,Angular會在相應的生命周期自動呼叫

因此若有需要用上生命週期時,也不必在 implements 後面把有用上的都補上,就直接寫在 class 裡面就行

可以的話仍建議寫的嚴謹,便於一眼快速掌握這component有使用到哪些生命週期
而在 implements 都有補上相關的生命週期的話,class 裡面用的名字就要跟implements後方的一致

Angular 生命周期

  1. constructor()
    • 即實例化這個 class,不算是生命周期
    • 用於初始化一些內部參數或依賴注入,不該有其他事務判斷
    • JavaScript 原生限制,constructor無法使用async, await。故也不適合在此處理事務
  2. ngOnChanges()
    • 有父子組件傳值時會觸發,若無父子組件,則跳到下一步
  3. ngOnInit()
    • 第一次顯示資料繫結和設定指令/元件的輸入屬性之後,初始化指令/元件
    • 在第一輪 ngOnChanges() 完成之後呼叫,只呼叫一次
    • 有請求資料的話,通常會放在這裡
  4. ngDoCheck()
    • 可以強迫檢測資料繫結的內容,放自己的邏輯來判斷內容後做相應操作
    • 緊跟在 ngOnChanges() 和 ngOnInit() 後面呼叫
  5. ngAfterContentInit()
    • 把外部內容傳入資料後呼叫,跟ngOnInit()相似
    • 第一次 ngDoCheck() 之後呼叫,只呼叫一次。
  6. ngAfterContentChecked()
    • ngDoCheck()很像,檢測完後,再放自己的邏輯判斷
    • ngAfterContentInit() 和每次 ngDoCheck() 之後呼叫
  7. ngAfterViewInit()
    • 完成視圖渲染後觸發
    • 若有需要dom的操作,就放在這邊
    • 第一次 ngAfterContentChecked() 之後呼叫,只呼叫一次
  8. ngAfterViewChecked()
    • 相似於ngDoCheck()ngAfterContentChecked(),可以做一些檢測
    • ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫
  9. ngOnDestroy()
    • 當組件銷毀時觸發,通常用於unsubcribe
    • 在 Angular 銷毀指令/元件之前呼叫

完整的首次啟動觸發流程

首次啟動組件
總共會觸發:0→(1)→2→3→4→5→6→7,即除了ngOnDestroy之外都有觸發
有父子組件時,才會觸發1.ngOnChanges,所以上述流程用()註記
接著會馬上再觸發所有的check (通常自定義的事務判斷都會寫在這裡)
(1. ngOnChanges)3,ngDoCheck5,ngAfterContentChecked7,ngAfterViewChecked

接下來就是 user 操作而改變值時,才會再依序觸發 (1)→3→5→7 的 check 事務

關於生命周期的幾個大原則

  1. 所有init周期,只有首次加載時觸發一次。就再也不會被觸發
  2. 所有的check周期,在資料有變化時都會觸發,且順序皆為3→5→7,業務邏輯可寫在此處
  3. 若有subcribe,要記得在Destroy寫上unsubcribe,避免消耗系統資源