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