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

創(chuàng)新互聯(lián)主營(yíng)雙橋網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開(kāi)發(fā),雙橋h5小程序開(kāi)發(fā)搭建,雙橋網(wǎng)站營(yíng)銷推廣歡迎雙橋等地區(qū)企業(yè)咨詢

環(huán)境:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. 摘要

當(dāng) Angular 實(shí)例化組件類并渲染組件視圖及其子視圖時(shí)，組件實(shí)例的生命周期就開(kāi)始了。生命周期一直伴隨著變更檢測(cè)，Angular 會(huì)檢查數(shù)據(jù)綁定屬性何時(shí)發(fā)生變化，并按需更新視圖和組件實(shí)例。當(dāng) Angular 銷毀組件實(shí)例并從 DOM 中移除它渲染的模板時(shí)，生命周期就結(jié)束了。當(dāng) Angular 在執(zhí)行過(guò)程中創(chuàng)建、更新和銷毀實(shí)例時(shí)，指令就有了類似的生命周期?！鞠嚓P(guān)教程推薦：《angular教程》】

你的應(yīng)用可以使用生命周期鉤子方法來(lái)觸發(fā)組件或指令生命周期中的關(guān)鍵事件，以初始化新實(shí)例，需要時(shí)啟動(dòng)變更檢測(cè)，在變更檢測(cè)過(guò)程中響應(yīng)更新，并在刪除實(shí)例之前進(jìn)行清理。

2. 生命周期及順序

• ngOnChanges(): 當(dāng) Angular 設(shè)置或重新設(shè)置數(shù)據(jù)綁定的輸入屬性時(shí)響應(yīng)。

• ngOnInit(): 在 Angular 第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后，初始化指令/組件。

• ngDoCheck(): 每次執(zhí)行變更檢測(cè)時(shí)的 ngOnChanges() 和 首次執(zhí)行變更檢測(cè)時(shí)的 ngOnInit() 后調(diào)用。

• ngAfterContentInit(): 當(dāng) Angular 把外部?jī)?nèi)容投影進(jìn)組件視圖或指令所在的視圖之后調(diào)用。

• ngAfterContentChecked(): ngAfterContentInit() 和每次 ngDoCheck() 之后調(diào)用

• ngAfterViewInit(): 當(dāng) Angular 初始化完組件視圖及其子視圖或包含該指令的視圖之后調(diào)用。

• ngAfterViewChecked(): ngAfterViewInit() 和每次 ngAfterContentChecked() 之后調(diào)用。

• ngOnDestroy(): 每當(dāng) Angular 每次銷毀指令/組件之前調(diào)用，清理釋放資源。

3. 響應(yīng)生命周期事件

我們以通過(guò)實(shí)現(xiàn)一個(gè)或多個(gè) Angular中定義的生命周期鉤子接口來(lái)響應(yīng)組件或指令生命周期中的事件。每個(gè)接口都有唯一的一個(gè)鉤子方法，它們的名字是由接口名再加上 ng 前綴構(gòu)成的。例如：

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

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

說(shuō)明：

1） 通過(guò)生命周期鉤子接口來(lái)響應(yīng)生命周期中的事件，需要在類名之后，聲明實(shí)現(xiàn)(implements) 具體的鉤子接口。然后代碼中定義個(gè)鉤子函數(shù)才能被執(zhí)行。如 ngOnInit() 對(duì)應(yīng) 接口OnInit 。

2） 可以實(shí)現(xiàn)多個(gè)鉤子接口，例如 export class DemoComponent implements OnInit, OnDestroy {

4. 主要生命周期事件

4.1. 初始化事件 ngOnInit()

使用 ngOnInit() 方法執(zhí)行以下初始化任務(wù)：

• 邏輯稍復(fù)雜，不適合放到構(gòu)造函數(shù)中的邏輯

• 初始化中的數(shù)據(jù)訪問(wèn)邏輯

• 處理需要根據(jù)父組件傳入?yún)?shù)（@Input）進(jìn)行初始化的邏輯

4.2. 實(shí)例銷毀 ngOnDestroy()

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

• 取消訂閱可觀察對(duì)象和 DOM 事件。

• 停止 interval 計(jì)時(shí)器。

• 反注冊(cè)該指令在全局或應(yīng)用服務(wù)中注冊(cè)過(guò)的所有回調(diào)。

• 釋放其他占有的資源。

5. 總結(jié)

• 使用生命周期事件鉤子函數(shù)，別忘了類名后面implements 相應(yīng)的接口，否則不生效；

• 初始化代碼，區(qū)分哪些放構(gòu)造函數(shù)，哪些放 ngOnInit()；

• 可以精簡(jiǎn)的鉤子事件方法來(lái)避免性能問(wèn)題；

• ngOnChanges()發(fā)生的非常頻繁，加入復(fù)雜邏輯會(huì)影響性能；

到此，關(guān)于“如何理解Angular中組件的生命周期”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！