大綱
1宴杀、angular生命周期是什么
2贼急、生命周期鉤子分類
3、Angular 2 指令生命周期鉤子的作用及調(diào)用順序
4鹏溯、Angular 2 指令生命周期鉤子詳解
5罢维、實(shí)例代碼
6、參考網(wǎng)址
angular生命周期是什么
1丙挽、Angular每個(gè)組件都存在一個(gè)生命周期肺孵，從創(chuàng)建，變更到銷毀颜阐。Angular提供組件生命周期鉤子悬槽，把這些關(guān)鍵時(shí)刻暴露出來，賦予在這些關(guān)鍵結(jié)點(diǎn)和組件進(jìn)行交互的能力瞬浓，掌握生命周期初婆，可以讓我們更好的開發(fā)Angular應(yīng)用
2、每個(gè)接口都有唯一的一個(gè)鉤子方法猿棉，它們的名字是由接口名再加上ng前綴構(gòu)成的磅叛，比如OnInit接口的鉤子方法叫做ngOnInit.
3、沒有指令或者組件會(huì)實(shí)現(xiàn)所有這些接口萨赁，并且有些鉤子只對(duì)組件有意義弊琴。只有在指令/組件中定義過的那些鉤子方法才會(huì)被Angular調(diào)用。
生命周期鉤子分類
基于指令與組件的區(qū)別來分類:
1杖爽、指令與組件共有的鉤子：
ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy
2敲董、組件特有的鉤子
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
Angular 2 指令生命周期鉤子的作用及調(diào)用順序
1紫皇、ngOnChanges - 當(dāng)數(shù)據(jù)綁定輸入屬性的值發(fā)生變化時(shí)調(diào)用
2、ngOnInit - 在第一次 ngOnChanges 后調(diào)用
3腋寨、ngDoCheck - 自定義的方法聪铺，用于檢測(cè)和處理值的改變
4、ngAfterContentInit - 在組件內(nèi)容初始化之后調(diào)用
5萄窜、ngAfterContentChecked - 組件每次檢查內(nèi)容時(shí)調(diào)用
6铃剔、ngAfterViewInit - 組件相應(yīng)的視圖初始化之后調(diào)用
7、ngAfterViewChecked - 組件每次檢查視圖時(shí)調(diào)用
8查刻、ngOnDestroy - 指令銷毀前調(diào)用
Angular 2 指令生命周期鉤子詳解
1键兜、構(gòu)造函數(shù)
constructor是ES6中class中新增的屬性，當(dāng)class類實(shí)例化的時(shí)候調(diào)用constructor穗泵，來初始化類普气。Angular中的組件就是基于class類實(shí)現(xiàn)的，在Angular中佃延，constructor用于注入依賴现诀。
組件的構(gòu)造函數(shù)會(huì)在所有的生命周期鉤子之前被調(diào)用，它主要用于依賴注入或執(zhí)行簡(jiǎn)單的數(shù)據(jù)初始化操作苇侵。
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) {//使用構(gòu)造注入的方式注入依賴對(duì)象
// 執(zhí)行初始化操作
this.name = 'Semlinker';
}
}
2赶盔、ngOnInit
在第一次 ngOnChanges 執(zhí)行之后調(diào)用，并且只被調(diào)用一次榆浓。它主要用于執(zhí)行組件的其它初始化操作或獲取組件輸入的屬性值于未。
在Angular第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后，初始化指令/組件陡鹃。
使用ngOnInit()有兩個(gè)原因：
a：在構(gòu)造函數(shù)之后馬上執(zhí)行復(fù)雜的初始化邏輯
b：在Angular設(shè)置完輸入屬性之后烘浦，對(duì)該組件進(jìn)行準(zhǔn)備。
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
當(dāng)數(shù)據(jù)綁定輸入屬性的值發(fā)生變化的時(shí)候闷叉，Angular 將會(huì)主動(dòng)調(diào)用 ngOnChanges 方法。它會(huì)獲得一個(gè) SimpleChanges 對(duì)象脊阴，包含綁定屬性的新值和舊值握侧，它主要用于監(jiān)測(cè)組件輸入屬性的變化。當(dāng)Angular（重新）設(shè)置數(shù)據(jù)綁定輸入屬性時(shí)響應(yīng)嘿期。 該方法接受當(dāng)前和上一屬性值的SimpleChanges對(duì)象品擎。
當(dāng)被綁定的輸入屬性的值發(fā)生變化時(shí)調(diào)用，首次調(diào)用一定會(huì)發(fā)生在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
在指令被銷毀前，將會(huì)調(diào)用 ngOnDestory 方法蜜猾。它主要用于執(zhí)行一些清理操作秀菱，比如：移除事件監(jiān)聽振诬、清除定時(shí)器、退訂 Observable 等衍菱。
當(dāng)Angular每次銷毀指令/組件之前調(diào)用并清掃赶么。 在這兒反訂閱可觀察對(duì)象和分離事件處理器，以防內(nèi)存泄漏梦碗。
在Angular銷毀指令/組件之前調(diào)用禽绪。
一些清理邏輯必須在Angular銷毀指令之前運(yùn)行蓖救，把它們放在ngOnDestroy()中洪规。這是在該組件消失之前，可用來通知應(yīng)用程序中其它部分的最后一個(gè)時(shí)間點(diǎn)循捺。這里是用來釋放那些不會(huì)被垃圾收集器自動(dòng)回收的各類資源的地方斩例。 取消那些對(duì)可觀察對(duì)象和DOM事件的訂閱。停止定時(shí)器从橘。注銷該指令曾注冊(cè)到全局服務(wù)或應(yīng)用級(jí)服務(wù)中的各種回調(diào)函數(shù)念赶。 如果不這么做，就會(huì)有導(dǎo)致內(nèi)存泄露的風(fēng)險(xiǎn)恰力。
@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
當(dāng)組件的輸入屬性發(fā)生變化時(shí)，將會(huì)觸發(fā) ngDoCheck 方法踩萎。我們可以使用該方法停局，自定義我們的檢測(cè)邏輯。它也可以用來加速我們變化檢測(cè)的速度香府。
檢測(cè)董栽，并在發(fā)生Angular無法或不愿意自己檢測(cè)的變化時(shí)作出反應(yīng)。
在每個(gè)Angular變更檢測(cè)周期中調(diào)用企孩，ngOnChanges()和ngOnInit()之后锭碳。
6、ngAfterContentInit
在組件使用 ng-content 指令的情況下勿璃，Angular 會(huì)在將外部?jī)?nèi)容放到視圖后用擒抛。它主要用于獲取通過 @ContentChild 或 @ContentChildren 屬性裝飾器查詢的內(nèi)容視圖元素。
當(dāng)把內(nèi)容投影進(jìn)組件之后調(diào)用补疑。第一次ngDoCheck()之后調(diào)用歧沪，只調(diào)用一次。
7癣丧、ngAfterContentChecked
在組件使用 ng-content 指令的情況下槽畔，Angular 會(huì)在檢測(cè)到外部?jī)?nèi)容的綁定或者每次變化的時(shí)候調(diào)用。
每次完成被投影組件內(nèi)容的變更檢測(cè)之后調(diào)用胁编。ngAfterContentInit()和每次ngDoCheck()之后調(diào)用
8厢钧、ngAfterViewInit
在組件相應(yīng)的視圖初始化之后調(diào)用鳞尔，它主要用于獲取通過 @ViewChild 或 @ViewChildren 屬性裝飾器查詢的視圖元素。
初始化完組件視圖及其子視圖之后調(diào)用早直。第一次ngAfterContentChecked()之后調(diào)用寥假，只調(diào)用一次。
9霞扬、ngAfterViewChecked
組件每次檢查視圖時(shí)調(diào)用
每次做完組件視圖和子視圖的變更檢測(cè)之后調(diào)用糕韧。
ngAfterViewInit()和每次ngAfterContentChecked()之后調(diào)用。
10喻圃、AfterContent鉤子和AfterView鉤子的區(qū)別
AfterContent鉤子和AfterView相似萤彩。關(guān)鍵的不同點(diǎn)是子組件的類型不同。
1斧拍、AfterView鉤子所關(guān)心的是ViewChildren雀扶，這些子組件的元素標(biāo)簽會(huì)出現(xiàn)在該組件的模板里面。
2肆汹、AfterContent鉤子所關(guān)心的是ContentChildren愚墓，這些子組件被Angular投影進(jìn)該組件中。
實(shí)例代碼
angular代碼實(shí)例中的angular-life-cycle
