技術標籤：Angular入門到精通Angularangular

文章目錄

• 1. 摘要
• 2. 生命週期及順序
• 3. 響應生命週期事件
• 4. 主要生命週期事件
• • 4.1. 初始化事件 ngOnInit()
  • 4.2. 例項銷燬 ngOnDestroy()
• 5. 總結

環境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 摘要

當 Angular 例項化元件類並渲染元件檢視及其子檢視時，元件例項的生命週期就開始了。生命週期一直伴隨著變更檢測，Angular 會檢查資料繫結屬性何時發生變化，並按需更新檢視和元件例項。當 Angular 銷燬元件例項並從 DOM 中移除它渲染的模板時，生命週期就結束了。當 Angular 在執行過程中建立、更新和銷燬例項時，指令就有了類似的生命週期。

你的應用可以使用生命週期鉤子方法來觸發元件或指令生命週期中的關鍵事件，以初始化新例項，需要時啟動變更檢測，在變更檢測過程中響應更新，並在刪除例項之前進行清理。

2. 生命週期及順序

1. ngOnChanges(): 當 Angular 設定或重新設定資料繫結的輸入屬性時響應。
2. ngOnInit(): 在 Angular 第一次顯示資料繫結和設定指令/元件的輸入屬性之後，初始化指令/元件。
3. ngDoCheck(): 每次執行變更檢測時的 ngOnChanges() 和 首次執行變更檢測時的 ngOnInit() 後呼叫。
4. ngAfterContentInit(): 當 Angular 把外部內容投影進元件檢視或指令所在的檢視之後呼叫。
5. ngAfterContentChecked(): ngAfterContentInit() 和每次 ngDoCheck() 之後呼叫
6. ngAfterViewInit(): 當 Angular 初始化完元件檢視及其子檢視或包含該指令的檢視之後呼叫。
7. ngAfterViewChecked(): ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫。
8. ngOnDestroy(): 每當 Angular 每次銷燬指令/元件之前呼叫，清理釋放資源。

3. 響應生命週期事件

我們以通過實現一個或多個 Angular中定義的生命週期鉤子介面來響應元件或指令生命週期中的事件。每個介面都有唯一的一個鉤子方法，它們的名字是由介面名再加上 ng 字首構成的。例如：

@Component()
export class DemoComponent implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
      // do something here
  }
}

說明：
1） 通過生命週期鉤子介面來響應生命週期中的事件，需要在類名之後，宣告實現(implements) 具體的鉤子介面。然後程式碼中定義個鉤子函式才能被執行。如 ngOnInit() 對應 介面OnInit 。
2） 可以實現多個鉤子介面，例如 export class DemoComponent implements OnInit, OnDestroy {

4. 主要生命週期事件

4.1. 初始化事件 ngOnInit()

使用 ngOnInit() 方法執行以下初始化任務:

1. 邏輯稍複雜，不適合放到建構函式中的邏輯
2. 初始化中的資料訪問邏輯
3. 處理需要根據父元件傳入引數（@Input）進行初始化的邏輯

4.2. 例項銷燬 ngOnDestroy()

把清理邏輯放進 ngOnDestroy() 中，這個邏輯就必然會在 Angular 銷燬該指令之前執行。下列邏輯可言放到ngOnDestroy()：

• 取消訂閱可觀察物件和 DOM 事件。
• 停止 interval 計時器。
• 反註冊該指令在全域性或應用服務中註冊過的所有回撥。
• 釋放其他佔有的資源。

5. 總結

1. 使用生命週期事件鉤子函式，別忘了類名後面implements 相應的介面，否則不生效；
2. 初始化程式碼，區分哪些放建構函式，哪些放 ngOnInit()；
3. 可以精簡的鉤子事件方法來避免效能問題；
4. ngOnChanges()發生的非常頻繁，加入複雜邏輯會影響效能；

---------------- END ----------------

======================