Angular2 元件生命週期

風靈使發表於2018-08-26

1. 說明

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

2. 介面

按照生命週期執行的先後順序,Angular生命週期介面如下所示

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

3. 示例

我們用一個示例展示一些常用的生命週期函式的用法,主要包括ngOnChangesngOnInitngDoCheckngOnDestroy,實現的示例程式碼如下:

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中執行,得到的結果如下,可以清楚的看到按照ngOnChangesngOnInitngDoCheck的順序執行,當元件銷燬時會呼叫ngOnDestroy
這裡寫圖片描述

相關文章