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. 示例

我們用一個示例展示一些常用的生命周期函數的用法,主要包括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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM