Angular的生命周期鈎子的作用及調用順序

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

生命周期鈎子詳解

1、構造函數

constructor是ES6中class中新增的屬性，當class類實例化的時候調用constructor，來初始化類。Angular中的組件就是基於class類實現的，在Angular中，constructor用於注入依賴。
組件的構造函數會在所有的生命周期鈎子之前被調用，它主要用於依賴注入或執行簡單的數據初始化操作。

import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Welcome to Angular World</h1> <p>Hello {{name}}</p> `, }) export class AppComponent { name: string = ''; constructor(public elementRef: ElementRef) {//使用構造注入的方式注入依賴對象 // 執行初始化操作 this.name = 'Semlinker'; } } 

2、ngOnInit

在第一次 ngOnChanges 執行之后調用，並且只被調用一次。它主要用於執行組件的其它初始化操作或獲取組件輸入的屬性值。
在Angular第一次顯示數據綁定和設置指令/組件的輸入屬性之后，初始化指令/組件。
使用ngOnInit()有兩個原因：
a：在構造函數之后馬上執行復雜的初始化邏輯
b：在Angular設置完輸入屬性之后，對該組件進行准備。

import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'exe-child', template: ` <p>父組件的名稱：{{pname}} </p> ` }) export class ChildComponent implements OnInit { @Input() pname: string; // 父組件的名稱 constructor() { console.log('ChildComponent constructor', this.pname); // Output：undefined } ngOnInit() { console.log('ChildComponent ngOnInit', this.pname); // output: 輸入的pname值 } } 

3、ngOnChanges

當數據綁定輸入屬性的值發生變化的時候，Angular 將會主動調用 ngOnChanges 方法。它會獲得一個 SimpleChanges 對象，包含綁定屬性的新值和舊值，它主要用於監測組件輸入屬性的變化。當Angular（重新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的SimpleChanges對象。
當被綁定的輸入屬性的值發生變化時調用，首次調用一定會發生在ngOnInit()之前。

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h4>Welcome to Angular World</h4> <exe-child name="exe-child-component"></exe-child> `, }) export class AppComponent { } /* child.component.ts */ import { Component, Input, SimpleChanges, OnChanges } from '@angular/core'; @Component({ selector: 'exe-child', template: ` <p>Child Component</p> <p>{{ name }}</p> ` }) export class ChildComponent implements OnChanges{ @Input() name: string; ngOnChanges(changes: SimpleChanges) { console.dir(changes); } } 

4、ngOnDestory

在指令被銷毀前，將會調用 ngOnDestory 方法。它主要用於執行一些清理操作，比如：移除事件監聽、清除定時器、退訂 Observable 等。
當Angular每次銷毀指令/組件之前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。
在Angular銷毀指令/組件之前調用。
一些清理邏輯必須在Angular銷毀指令之前運行，把它們放在ngOnDestroy()中。這是在該組件消失之前，可用來通知應用程序中其它部分的最后一個時間點。這里是用來釋放那些不會被垃圾收集器自動回收的各類資源的地方。 取消那些對可觀察對象和DOM事件的訂閱。停止定時器。注銷該指令曾注冊到全局服務或應用級服務中的各種回調函數。 如果不這么做，就會有導致內存泄露的風險。

@Directive({ selector: '[destroyDirective]' }) export class OnDestroyDirective implements OnDestroy { sayHello: number; constructor() { this.sayHiya = window.setInterval(() => console.log('hello'), 1000); } ngOnDestroy() { window.clearInterval(this.sayHiya); } } 

5、ngDoCheck

當組件的輸入屬性發生變化時，將會觸發 ngDoCheck 方法。我們可以使用該方法，自定義我們的檢測邏輯。它也可以用來加速我們變化檢測的速度。
檢測，並在發生Angular無法或不願意自己檢測的變化時作出反應。
在每個Angular變更檢測周期中調用，ngOnChanges()和ngOnInit()之后。

6、ngAfterContentInit

在組件使用 ng-content 指令的情況下，Angular 會在將外部內容放到視圖后用。它主要用於獲取通過 @ContentChild 或 @ContentChildren 屬性裝飾器查詢的內容視圖元素。
當把內容投影進組件之后調用。第一次ngDoCheck()之后調用，只調用一次。

7、ngAfterContentChecked

在組件使用 ng-content 指令的情況下，Angular 會在檢測到外部內容的綁定或者每次變化的時候調用。
每次完成被投影組件內容的變更檢測之后調用。ngAfterContentInit()和每次ngDoCheck()之后調用

8、ngAfterViewInit

在組件相應的視圖初始化之后調用，它主要用於獲取通過 @ViewChild 或 @ViewChildren 屬性裝飾器查詢的視圖元素。
初始化完組件視圖及其子視圖之后調用。第一次ngAfterContentChecked()之后調用，只調用一次。

9、ngAfterViewChecked

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

10、AfterContent鈎子和AfterView鈎子的區別

AfterContent鈎子和AfterView相似。關鍵的不同點是子組件的類型不同。
1、AfterView鈎子所關心的是ViewChildren，這些子組件的元素標簽會出現在該組件的模板里面。
2、AfterContent鈎子所關心的是ContentChildren，這些子組件被Angular投影進該組件中。