淺談對Angular中的生命周期鉤子的理解

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

什么是生命周期鉤子

簡單點來說生命周期鉤子就是Angular中一個組件從被創建當銷毀期間的一些有意義的關鍵時刻.這些關鍵時刻在Angular中被Angular核心模塊 @angular/core 暴露出來,賦予了我們在它們發生時采取行動的能力.

有哪些生命周期鉤子

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

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

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

ngOnChanges()

• 當Angular（重新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的SimpleChanges對象
• 當被綁定的輸入屬性的值發生變化時調用，首次調用一定會發生在ngOnInit()之前。
  

ngOnChanges() 生命周期的調用與一個組件中的輸入屬性有關.

當在一個組件中使用 @Input() 定義了一個輸入屬性時.只要這個輸入屬性的值發生了改變.就會觸發 ngOnChanges() 生命周期鉤子.這個生命周期鉤子被調用時會傳入一個 SimpleChanges 對象,這個對象中包含了輸入屬性當前值和上一值.

@Input()
public name: string;

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

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

同時,還有一點需要注意:你的輸入屬性定義為你引用類型和基本類型的時候其表現結果是不同的.當你的輸入屬性是基本類型時.你的每一次改變都會觸發 ngOnChanges() 生命周期鉤子,而當你的輸入屬性是引用類型時,你改變你引用類型 當中 的屬性時,并不會觸發 ngOnChanges() 生命周期鉤子.只有當你將你引用類型數據的指針指向另一塊內存地址的時候才會觸發 ngOnChanges() 生命周期鉤子.

ngOnInit()

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

ngOnInit() 是一個組件的生命周期中一定存在的一個鉤子.它在一個組件被初始化的時候被調用.在這個期間,你可以執行一些相應的數據綁定操作.

ngDoCheck()

• 檢測，并在發生Angular無法或不愿意自己檢測的變化時作出反應。
• 在每個Angular變更檢測周期中調用，ngOnChanges()和ngOnInit()之后。

ngDoCheck() 是Angular中的變更檢測機制.它由 zone.js 來實現的.其行為是只要你的Angular中的某個組件發生異步事件.就會檢查整個組件樹,以保證組件屬性的變化或頁面的變化是同步的.所以 ngDoCheck() 的觸發相當頻繁的.并且是我們無法預料到的.也許我們在頁面上的一個無意識操作,就會觸發幾個甚至幾十個的 ngDoCheck() 生命周期鉤子.

所以我們在使用 ngDoCheck() 生命周期鉤子的時候一定要加上判斷.以避免無用的觸發干擾我們.

ngAfterContentInit()

• 當把內容投影進組件之后調用。
• 第一次ngDoCheck()之后調用，只調用一次。
• 只適用于組件。
  

當父組件向子組件投影內容的時.在子組件內會初始化父組件的投影內容,此時會調用 ngAfterContentInit() 生命周期鉤子.在整個組件生命周期中 ngAfterContentInit() 生命周期鉤子只會調用一次.如下所示:

// 父組件
<app-child>
 <p>我是父組件向子組件的投影內容</>
</app-child>


// 子組件 ChildComponent
<div>
 //接受父組件的投影內容
 <ng-content></ng-content>
</div>

ngAfterContentChecked()

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

當父組件向子組件的投影內容發生改變時會調用 ngAfterContentChecked() 生命周期鉤子.它與 ngDoCheck() 類似.當投影內容發生改變時,就會執行變更檢查機制.同時調用 ngAfterContentChecked() 生命周期鉤子.此外.還有一點:當父組件和子組件都有投影內容時,會先執行父組件的生命周期鉤子.它與下面要說的 ngAfterViewInit() 和 ngAfterViewChecked() 相反.

ngAfterViewInit()

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

當其組件本身和所有的子組件渲染完成,已經呈現在頁面上時,調用 ngAfterViewInit() 生命周期鉤子.在整個組件生命周期中 ngAfterViewInit() 生命周期鉤子只會調用一次.

ngAfterViewChecked()

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

當組件及其子組件的視圖發生改變時,執行完變更檢查機制后調用.當父組件和子組件都發生視圖變化時,會先執行子組件的生命周期鉤子.

注意:這里所說的視圖發生改變不一定是真正頁面上的變化.只是Angular種所認為的視圖變化.因為Angular本身并不能察覺到頁面上顯示的視圖.所以在Angular認為,只要你在后臺定義的屬性發生了改變,就是視圖有了變化.從而就會調用 ngAfterViewChecked() 生命周期鉤子.

ngOnDestroy

• 當Angular每次銷毀指令/組件之前調用并清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。
• 在Angular銷毀指令/組件之前調用。
  

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。