本篇文章帶大家繼續(xù)angular的學(xué)習(xí)，使用angular進(jìn)行開發(fā)時(shí)，避免不了需要接觸生命周期，下面就來(lái)帶大家一起聊聊Angular中的生命周期，希望對(duì)大家有所幫助！

接觸過 react 和 vue 開發(fā)的讀者應(yīng)該對(duì)生命周期這個(gè)概念不陌生。我們?cè)谑褂?angular 開發(fā)的過程中，是避免不了的。

組件從開始建立到銷毀的過程中，會(huì)經(jīng)歷過一系列的階段。這就是一個(gè)生命周期，這些階段對(duì)應(yīng)著應(yīng)用提供的 lifecycle hooks。

那么，在 angular 中，這些 hooks 都有哪些呢？了解它們，對(duì)你編寫程序應(yīng)該在哪里編寫，很重要。【相關(guān)教程推薦：《angular教程》】

angular 中，生命周期執(zhí)行的順序如下：

- constructor 【常用，不算鉤子函數(shù)，但是很重要】 - ngOnChanges【常用】 - ngOnInit【常用】 - ngDoCheck   - ngAfterContentInit   - ngAfterContentChecked   - ngAfterViewInit【常用】   - ngAfterViewChecked - ngOnDestroy【常用】

為了解說和驗(yàn)證，我們用 angular-cli 生成一個(gè) demo 項(xiàng)目。

constructor

在 es6 中的 class 初始化對(duì)象的時(shí)候，constructor 會(huì)立即被調(diào)用。

class Person {   constructor(name) {     console.log('be called')     this.name = name;   } }  let jimmy = new Person('jimmy'); // be called

angular 的組件本身就是導(dǎo)出一個(gè)類。當(dāng)這個(gè)組件被 new 起來(lái)的時(shí)候，會(huì)獲取 constructor 中的預(yù)設(shè)的值。

ngOnChanges

當(dāng)我們有外部參數(shù)更改的時(shí)候，我們就會(huì)執(zhí)行 ngOnChanges，也就是說組件中有 @Input 所綁定的屬性值發(fā)生改變的時(shí)候調(diào)用。

簡(jiǎn)單說，父組件綁定子組件中的元素，會(huì)觸發(fā)這個(gè)鉤子函數(shù)，可以多次出發(fā)。這在下面的 ngOnInit 總會(huì)介紹。

ngOnInit

這個(gè)方法調(diào)用的時(shí)候，說明組件已經(jīng)初始化成功。在第一次 ngOnChanges() 完成之后調(diào)用，且只調(diào)用一次。

// app.component.ts export class AppComponent implements OnInit, OnChanges {    constructor() {     console.log('1. constructor')   }    ngOnChanges() {     console.log('2. ngOnChanges')   }    ngOnInit() {     console.log('3. ngOnInit')   } }

打印的信息如下：

咦？怎么沒有打印 ngOnChanges 中的鉤子函數(shù)信息呢？

上面已經(jīng)說過了，需要觸發(fā)條件 @Input 的屬性值改變的時(shí)候。我們來(lái)修改一下：

<!-- app.component.html --> <div>   <app-demo></app-demo> </div>

// app.component.ts // AppComponent 類中添加屬性 public count:number = 0;

<!-- demo.component.html --> <h3>count: {{ count }}</h3>

// demo.component.ts export class DemoComponent implements OnInit, OnChanges {    @Input()   public count: number;    constructor() {     console.log('1. demo constructor')   }    ngOnChanges() {     console.log('2. demo ngOnChanges')   }    ngOnInit() {     console.log('3. demo ngOnInit')   }  }

當(dāng)通過 @Input 將值傳遞給子組件 demo 的時(shí)候，就會(huì)觸發(fā) demo 組件中的 ngOnChanges。

當(dāng) @Input 傳遞的屬性發(fā)生改變的時(shí)候，可以多次觸發(fā) demo 組件中的 ngOnChanges 鉤子函數(shù)。

<!-- app.component.html --> <div>   <app-demo [count]="count"></app-demo>    <button (click)="parentDemo()">parent button</button> </div>

// app.component.ts parentDemo() {   this.count++; }

ngDoCheck

當(dāng)發(fā)生變化檢測(cè)的時(shí)候，觸發(fā)該鉤子函數(shù)。

這個(gè)鉤子函數(shù)，緊跟在每次執(zhí)行變更檢測(cè)時(shí)候 ngOnChanges 和首次執(zhí)行執(zhí)行變更檢測(cè)時(shí) ngOnInit 后面調(diào)用。

// demo.component.ts  ngDoCheck() {   console.log('4. demo ngDoCheck') }

這個(gè)鉤子函數(shù)調(diào)用得比較頻繁，使用成本比較高，謹(jǐn)慎使用。

一般使用 ngOnChanges 來(lái)檢測(cè)變動(dòng)，而不是 ngDoCheck

ngAfterContentInit

當(dāng)把外部的內(nèi)容投影到內(nèi)部組件，第一次調(diào)用 ngDoCheck 之后調(diào)用 ngAfterContentInit，而且只調(diào)用一次。

// demo.component.ts  ngAfterContentInit() {   console.log('5. demo ngAfterContentInit'); }

ngAfterContentChecked

ngAfterContentChecked 鉤子函數(shù)在每次 ngDoCheck 之后調(diào)用.

// demo.component.ts  ngAfterContentChecked() {   console.log('5. demo ngAfterContentChecked'); }

ngAfterViewInit

視圖初始化完成調(diào)用此鉤子函數(shù)。在第一次 ngAfterContentChecked 之后調(diào)用，只調(diào)用一次。

這個(gè)時(shí)候，獲取頁(yè)面的 DOM 節(jié)點(diǎn)比較合理

// demo.compoent.ts  ngAfterViewInit() {   console.log('7. demo ngAfterViewInit'); }

ngAfterViewChecked

視圖檢測(cè)完成調(diào)用。在 ngAfterViewinit 后調(diào)用，和在每次 ngAfterContentChecked 之后調(diào)用，也就是在每次 ngDoCheck 之后調(diào)用。

// demo.component.ts  ngAfterViewChecked() {   console.log('8. ngAfterViewChecked') }

ngOnDestroy

組件被銷毀時(shí)候進(jìn)行的操作。

在這個(gè)鉤子函數(shù)中，我們可以取消訂閱，取消定時(shí)操作等等。

<!-- app.component.html --> <app-demo [count]="count" *ngIf="showDemoComponent"></app-demo>  <button (click)="hideDemo()">hide demo component</button>

// app.component.ts public showDemoComponent: boolean = true;  hideDemo() {   this.showDemoComponent = false }

// demo.component.ts ngOnDestroy() {   console.log('9. demo ngOnDestroy') }

PS: 不知道讀者有沒有發(fā)現(xiàn)，調(diào)用一次的鉤子函數(shù)都比較常用～