對Angular中的生命週期鉤子的理解

什麼是生命週期鉤子

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

有哪些生命週期鉤子

  Angular中從一個組件的建立到銷燬一個有八個生命週期鉤子它們,按照前後順序.它們分別是:

• ngOnChanges()
• ngOnInit()
• ngDoCheck()
• ngAfterContentInit()
• ngAfterContentChecked()
• ngAfterViewInit()
• ngAfterViewChecked()
• 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銷燬指令/組件以前調用。

個人我的網址: wangyiming.info