如何理解Angular中組件的生命周期

這篇文章主要介紹“如何理解Angular中組件的生命周期”，在日常操作中，相信很多人在如何理解Angular中組件的生命周期問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解Angular中組件的生命周期”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

環境:

• 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中組件的生命周期”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！