【Angular2】生命週期

1. 說明

Angular每個組件都存在一個生命週期，從創建，變更到銷燬。Angular提供組件生命週期鉤子，把這些關鍵時刻暴露出來，賦予在這些關鍵結點和組件進行交互的能力。

2. 接口

按照生命週期執行的先後順序，Angular生命週期接口如下所示

名稱	時機	接口	範圍
ngOnChanges	當被綁定的輸入屬性的值發生變化時調用，首次調用一定會發生在 ngOnInit之前。	OnChanges	指令和組件
ngOnInit	在第一輪 ngOnChanges 完成之後調用。 ( 譯註：也就是說當每個輸入屬性的值都被觸發了一次 ngOnChanges 之後纔會調用 ngOnInit ，此時所有輸入屬性都已經有了正確的初始綁定值 )	OnInit	指令和組件
ngDoCheck	在每個 Angular 變更檢測週期中調用。	DoCheck	指令和組件
ngAfterContentInit	當把內容投影進組件之後調用。	AfterContentInit	組件
ngAfterContentChecked	每次完成被投影組件內容的變更檢測之後調用。	AfterContentChecked	組件
ngAfterViewInit	初始化完組件視圖及其子視圖之後調用。 after initializing the component's views and child views.	AfterViewInit	組件
ngAfterViewChecked	每次做完組件視圖和子視圖的變更檢測之後調用。	AfterViewChecked	組件
ngOnDestroy	當 Angular 每次銷燬指令 / 組件之前調用。	OnDestroy	指令和組件

3. 執行順序

一個組件的最小完整生命週期執行順序如下：

執行順序

注：angular中的每個組件都是typescript中一個加了@Component裝飾器的class，所以在組件實例化時最先執行constructor()

4. 示例

我們用一個示例展示一些常用的生命週期函數的用法，主要包括ngOnChanges，ngOnInit，ngDoCheck，ngOnDestroy，實現的示例代碼如下：

birthday組件中實現了對應的生命週期函數，並在App組件中調用

import { Component, Input, OnChanges, OnInit, DoCheck, OnDestroy } from '@angular/core';

 

@Component({

    moduleId: 'birthday',

    selector: 'birthday',

    template: `

        <h5>your birthday is {{birthday}}</h5>

    `,

})

export class BirthdayComponent implements OnChanges, OnInit, DoCheck, OnDestroy {

    @Input()

    birthday;

 

    ngOnChanges(changes) {

        console.log('ngOnChanges');

    }

 

    ngOnInit() {

        console.log('ngOnInit');

    }

 

    ngDoCheck() {

        console.log('ngDoCheck');

    }

 

    ngOnDestroy() {

        console.log('ngOnDestroy');

    }

}

 

@Component({

    moduleId: 'app',

    selector: 'app',

    template: `

        <birthday [birthday]="birthday"></birthday>

    `,

    directives: [BirthdayComponent]

})

export class AppComponent {

    birthday: Date = new Date(2012, 10, 10);

}

在Chrome中運行，得到的結果如下，可以清楚的看到按照ngOnChanges，ngOnInit，ngDoCheck的順序執行，當組件銷燬時會調用ngOnDestroy。