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

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

創(chuàng)新互聯(lián)主營雙橋網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),雙橋h5小程序開發(fā)搭建,雙橋網(wǎ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í)例的生命周期就開始了。生命周期一直伴隨著變更檢測(cè)，Angular 會(huì)檢查數(shù)據(jù)綁定屬性何時(shí)發(fā)生變化，并按需更新視圖和組件實(shí)例。當(dāng) Angular 銷毀組件實(shí)例并從 DOM 中移除它渲染的模板時(shí)，生命周期就結(jié)束了。當(dāng) Angular 在執(zhí)行過程中創(chuàng)建、更新和銷毀實(shí)例時(shí)，指令就有了類似的生命周期。【相關(guān)教程推薦：《angular教程》】

你的應(yīng)用可以使用生命周期鉤子方法來觸發(fā)組件或指令生命周期中的關(guān)鍵事件，以初始化新實(shí)例，需要時(shí)啟動(dòng)變更檢測(cè)，在變更檢測(cè)過程中響應(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 把外部內(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)生命周期事件

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

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

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

說明：
1）通過生命周期鉤子接口來響應(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ù)訪問邏輯
處理需要根據(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è)過的所有回調(diào)。
釋放其他占有的資源。

5. 總結(jié)

使用生命周期事件鉤子函數(shù)，別忘了類名后面implements 相應(yīng)的接口，否則不生效；
初始化代碼，區(qū)分哪些放構(gòu)造函數(shù)，哪些放 ngOnInit()；
可以精簡的鉤子事件方法來避免性能問題；
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ī)砀鄬?shí)用的文章！

標(biāo)題名稱：如何理解Angular中組件的生命周期
本文URL：http://bm7419.com/article36/pcispg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、定制開發(fā)、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容