Angular4學習筆記（九）- 生命週期鉤子簡介

簡介

Angular 指令的生命週期，它是用來記錄指令從建立、應用及銷燬的過程。Angular 提供了一系列與指令生命週期相關的鉤子，便於咱們監控指令生命週期的變化，並執行相關的操做。Angular 中全部的鉤子以下圖所示：

分類

• 指令與組件共有的鉤子
  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngOnDestroy
• 組件特有的鉤子
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

調用順序

1. ngOnChanges - 當數據綁定輸入屬性的值發生變化時調用
2. ngOnInit - 在第一次 ngOnChanges 後調用
3. ngDoCheck - 自定義的方法，用於檢測和處理值的改變
4. ngAfterContentInit - 在組件內容初始化以後調用
5. ngAfterContentChecked - 組件每次檢查內容時調用
6. ngAfterViewInit - 組件相應的視圖初始化以後調用
7. ngAfterViewChecked - 組件每次檢查視圖時調用
8. ngOnDestroy - 指令銷燬前調用

如何實現

要實現生命週期鉤子，只需實現對應的接口便可，如實現ngOnChanges鉤子只需實現OnChanges接口便可：

export class XxxComponent implements 
  OnInit, OnChanges, 
  DoCheck, AfterContentInit, 
  AfterContentChecked, AfterViewChecked, 
  AfterViewInit, OnDestroy { 
    // balabalabala... 
}

ngOnChanges

觸發條件

OnChanges只對輸入的不可變對象起做用。
輸入屬性之前說過，使用@Input裝飾的屬性，這裏還須要注意不可變對象，在Angular中，典型的不可變對象是string類型，但全部自定義對象均爲可變對象，如：user:{name:string}，可變對象即便被定義爲輸入屬性，也不會觸發OnChanges方法。

ngOnChanges方法參數

ngOnChanges方法有一個SimpleChanges類型的參數，它實際上是一個類型爲SimpleChange，而且鍵值爲屬性名的數組:

export interface SimpleChanges { [propName: string]: SimpleChange; }

而SimpleChange的結構以下：

export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

假如咱們的組件中有一個知足觸發OnChanges鉤子條件的屬性名叫inputVal，那麼能夠經過以下方式獲取它變化先後的值：

ngOnChanges(changes: SimpleChanges): void {
    console.log('ngOnChanges中inputVal變動前值爲：'+ changes['inputVal'].previousValue);
    console.log('ngOnChanges中inputVal變動後值爲：'+ changes['inputVal'].currentValue);
  }

ngOnInit

在第一次 ngOnChanges 執行以後調用，而且只被調用一次。它主要用於執行組件的其它初始化操做或獲取組件輸入的屬性值。

ngDoCheck

當組件的輸入屬性發生變化時，將會觸發 ngDoCheck 方法。咱們可使用該方法，自定義咱們的檢測邏輯。

特別注意，使用時要比較精準的定義檢查位置，不然會形成性能問題，由於任何變化，好比鼠標的點擊事件或鍵盤的輸入事件都會觸發ngDoCheck。

ngAfterContentInit

在組件使用 ng-content 指令的狀況下，Angular 會在將外部內容放到視圖後用。它主要用於獲取經過 @ContentChild 或 @ContentChildren 屬性裝飾器查詢的內容視圖元素。

ngAfterContentChecked

在組件使用 ng-content 指令的狀況下，Angular 會在檢測到外部內容的綁定或者每次變化的時候調用。

ngAfterViewInit

在組件相應的視圖初始化以後調用，它主要用於獲取經過 @ViewChild 或 @ViewChildren 屬性裝飾器查詢的視圖元素。

ngAfterViewChecked

組件每次檢查視圖時調用

ngOnDestroy

在指令被銷燬前，將會調用 ngOnDestory 方法。它主要用於執行一些清理操做，好比：移除事件監聽、清除定時器、退訂 Observable 等。