淺談Angular中組件的生命週期

本篇文章要為大家介紹一下Angular中元件的生命週期（Component Lifecycle Hook）。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

環境:

• #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 在執行過程中建立、更新和銷毀實例時，指令就有了類似的生命週期。 【相關教學推薦：《angular教學》】

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

2. 生命週期及順序

• ngOnChanges(): 當 Angular 設定或重新設定資料綁定的輸入屬性時回應。

• ngOnInit(): 在 Angular 第一次顯示資料綁定和設定指令/元件的輸入屬性之後，初始化指令/元件。

• ngDoCheck(): 每次執行變更偵測時的 ngOnChanges() 和 第一次執行變更偵測時的 ngOnInit() 後呼叫。

• ngAfterContentInit(): 當 Angular 把外部內容投影進元件視圖或指令所在的視圖之後呼叫。

• ngAfterContentChecked(): ngAfterContentInit() 和每次ngDoCheck() 之後呼叫

• ngAfterViewInit(): 當Angular 初始化完元件視圖及其子視圖或包含該指令的視圖之後呼叫。

• ngAfterViewChecked(): ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫。

• 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() 方法執行下列初始化任務：

• 邏輯稍複雜，不適合放到建構函式中的邏輯

• #初始化中的資料存取邏輯

• 處理需要根據父元件傳入參數（@Input）進行初始化的邏輯

4.2.實例銷毀ngOnDestroy()

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

• 取消訂閱可觀察物件和 DOM 事件。

• 停止 interval 計時器。

• 反註冊該指令在全域或應用服務中註冊過的所有回呼。

• 釋放其他佔有的資源。

5.總結

• #使用生命週期事件鉤子函數，別忘了類別名稱後面implements 對應的接口，否則不生效；

• 初始化程式碼，區分哪些放構造函數，哪些放ngOnInit();

• 可以精簡的鉤子事件方法來避免效能問題；

• ngOnChanges()發生的非常頻繁，加入複雜邏輯會影響效能；

更多程式設計相關知識，請造訪：程式設計入門！ ！

以上是淺談Angular中組件的生命週期的詳細內容。更多資訊請關注PHP中文網其他相關文章！