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 等。