本文介紹了Angular中的生命周期鉤子的理解，分享給大家，希望對(duì)大家有所幫助

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是成都創(chuàng)新互聯(lián)公司的服務(wù)宗旨！把網(wǎng)站當(dāng)作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設(shè)中就是為了建設(shè)一個(gè)不僅審美在線，而且實(shí)用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對(duì)成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站優(yōu)化、網(wǎng)絡(luò)推廣、探索永無(wú)止境。

什么是生命周期鉤子

簡(jiǎn)單點(diǎn)來(lái)說(shuō)生命周期鉤子就是Angular中一個(gè)組件從被創(chuàng)建當(dāng)銷毀期間的一些有意義的關(guān)鍵時(shí)刻.這些關(guān)鍵時(shí)刻在Angular中被Angular核心模塊 @angular/core 暴露出來(lái),賦予了我們?cè)谒鼈儼l(fā)生時(shí)采取行動(dòng)的能力.

有哪些生命周期鉤子

Angular中從一個(gè)組件的創(chuàng)建到銷毀一個(gè)有八個(gè)生命周期鉤子它們,按照先后順序.它們分別是:

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngOnDestroy()

其中: ngOnInit() 、 ngAfterContentInit() 、 ngAfterViewInit() 和 ngOnDestroy() 在一個(gè)組件的生命周期中只會(huì)被調(diào)用一次,其它的都有可能會(huì)被多次調(diào)用.下面,就讓我們來(lái)詳細(xì)解列一下這些生命周期鉤子.

ngOnChanges()

• 當(dāng)Angular（重新）設(shè)置數(shù)據(jù)綁定輸入屬性時(shí)響應(yīng)。 該方法接受當(dāng)前和上一屬性值的SimpleChanges對(duì)象
• 當(dāng)被綁定的輸入屬性的值發(fā)生變化時(shí)調(diào)用，首次調(diào)用一定會(huì)發(fā)生在ngOnInit()之前。
  

ngOnChanges() 生命周期的調(diào)用與一個(gè)組件中的輸入屬性有關(guān).

當(dāng)在一個(gè)組件中使用 @Input() 定義了一個(gè)輸入屬性時(shí).只要這個(gè)輸入屬性的值發(fā)生了改變.就會(huì)觸發(fā) ngOnChanges() 生命周期鉤子.這個(gè)生命周期鉤子被調(diào)用時(shí)會(huì)傳入一個(gè) SimpleChanges 對(duì)象,這個(gè)對(duì)象中包含了輸入屬性當(dāng)前值和上一值.

@Input()
public name: string;

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes); // name:SimpleChange {previousValue: "a", currentValue: "ab", firstChange: false}
}

上面是我定義了一個(gè)輸入屬性 name 并將從 a 它改為 ab 之后的打印結(jié)果,可能你還注意到了打印的結(jié)果中還有一個(gè) firstChange 屬性.它是一個(gè)Booleans,表明你是否是第一次改變.

同時(shí),還有一點(diǎn)需要注意:你的輸入屬性定義為你引用類型和基本類型的時(shí)候其表現(xiàn)結(jié)果是不同的.當(dāng)你的輸入屬性是基本類型時(shí).你的每一次改變都會(huì)觸發(fā) ngOnChanges() 生命周期鉤子,而當(dāng)你的輸入屬性是引用類型時(shí),你改變你引用類型 當(dāng)中 的屬性時(shí),并不會(huì)觸發(fā) ngOnChanges() 生命周期鉤子.只有當(dāng)你將你引用類型數(shù)據(jù)的指針指向另一塊內(nèi)存地址的時(shí)候才會(huì)觸發(fā) ngOnChanges() 生命周期鉤子.

ngOnInit()

• 在Angular第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后，初始化指令/組件。
• 在第一輪ngOnChanges()完成之后調(diào)用，只調(diào)用一次。
  

ngOnInit() 是一個(gè)組件的生命周期中一定存在的一個(gè)鉤子.它在一個(gè)組件被初始化的時(shí)候被調(diào)用.在這個(gè)期間,你可以執(zhí)行一些相應(yīng)的數(shù)據(jù)綁定操作.

ngDoCheck()

• 檢測(cè)，并在發(fā)生Angular無(wú)法或不愿意自己檢測(cè)的變化時(shí)作出反應(yīng)。
• 在每個(gè)Angular變更檢測(cè)周期中調(diào)用，ngOnChanges()和ngOnInit()之后。

ngDoCheck() 是Angular中的變更檢測(cè)機(jī)制.它由 zone.js 來(lái)實(shí)現(xiàn)的.其行為是只要你的Angular中的某個(gè)組件發(fā)生異步事件.就會(huì)檢查整個(gè)組件樹(shù),以保證組件屬性的變化或頁(yè)面的變化是同步的.所以 ngDoCheck() 的觸發(fā)相當(dāng)頻繁的.并且是我們無(wú)法預(yù)料到的.也許我們?cè)陧?yè)面上的一個(gè)無(wú)意識(shí)操作,就會(huì)觸發(fā)幾個(gè)甚至幾十個(gè)的 ngDoCheck() 生命周期鉤子.

所以我們?cè)谑褂?ngDoCheck() 生命周期鉤子的時(shí)候一定要加上判斷.以避免無(wú)用的觸發(fā)干擾我們.

ngAfterContentInit()

• 當(dāng)把內(nèi)容投影進(jìn)組件之后調(diào)用。
• 第一次ngDoCheck()之后調(diào)用，只調(diào)用一次。
• 只適用于組件。
  

當(dāng)父組件向子組件投影內(nèi)容的時(shí).在子組件內(nèi)會(huì)初始化父組件的投影內(nèi)容,此時(shí)會(huì)調(diào)用 ngAfterContentInit() 生命周期鉤子.在整個(gè)組件生命周期中 ngAfterContentInit() 生命周期鉤子只會(huì)調(diào)用一次.如下所示:

// 父組件

 
我是父組件向子組件的投影內(nèi)容



// 子組件 ChildComponent

 //接受父組件的投影內(nèi)容
 

ngAfterContentChecked()

• 每次完成被投影組件內(nèi)容的變更檢測(cè)之后調(diào)用。
• ngAfterContentInit()和每次ngDoCheck()之后調(diào)用
• 只適合組件。

當(dāng)父組件向子組件的投影內(nèi)容發(fā)生改變時(shí)會(huì)調(diào)用 ngAfterContentChecked() 生命周期鉤子.它與 ngDoCheck() 類似.當(dāng)投影內(nèi)容發(fā)生改變時(shí),就會(huì)執(zhí)行變更檢查機(jī)制.同時(shí)調(diào)用 ngAfterContentChecked() 生命周期鉤子.此外.還有一點(diǎn):當(dāng)父組件和子組件都有投影內(nèi)容時(shí),會(huì)先執(zhí)行父組件的生命周期鉤子.它與下面要說(shuō)的 ngAfterViewInit() 和 ngAfterViewChecked() 相反.

ngAfterViewInit()

• 初始化完組件視圖及其子視圖之后調(diào)用。
• 第一次ngAfterContentChecked()之后調(diào)用，只調(diào)用一次。
• 只適合組件。

當(dāng)其組件本身和所有的子組件渲染完成,已經(jīng)呈現(xiàn)在頁(yè)面上時(shí),調(diào)用 ngAfterViewInit() 生命周期鉤子.在整個(gè)組件生命周期中 ngAfterViewInit() 生命周期鉤子只會(huì)調(diào)用一次.

ngAfterViewChecked()

• 每次做完組件視圖和子視圖的變更檢測(cè)之后調(diào)用。
• ngAfterViewInit()和每次ngAfterContentChecked()之后調(diào)用。
• 只適合組件。

當(dāng)組件及其子組件的視圖發(fā)生改變時(shí),執(zhí)行完變更檢查機(jī)制后調(diào)用.當(dāng)父組件和子組件都發(fā)生視圖變化時(shí),會(huì)先執(zhí)行子組件的生命周期鉤子.

注意:這里所說(shuō)的視圖發(fā)生改變不一定是真正頁(yè)面上的變化.只是Angular種所認(rèn)為的視圖變化.因?yàn)锳ngular本身并不能察覺(jué)到頁(yè)面上顯示的視圖.所以在Angular認(rèn)為,只要你在后臺(tái)定義的屬性發(fā)生了改變,就是視圖有了變化.從而就會(huì)調(diào)用 ngAfterViewChecked() 生命周期鉤子.

ngOnDestroy

• 當(dāng)Angular每次銷毀指令/組件之前調(diào)用并清掃。 在這兒反訂閱可觀察對(duì)象和分離事件處理器，以防內(nèi)存泄漏。
• 在Angular銷毀指令/組件之前調(diào)用。
  

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。