淺談angular2 組件的生命周期鉤子

更新時間：2017年08月12日 11:46:12 作者：肥飛貓的專欄

本篇文章主要介紹了淺談angular2 組件的生命周期鉤子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了淺談angular2 組件的生命周期鉤子，分享給大家，具體如下：

按照生命周期執(zhí)行的先后順序，Angular生命周期接口如下所示

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

生命周期順序簡寫

在Angular通過構(gòu)造函數(shù)創(chuàng)建組件/指令時，它調(diào)用這些生命周期鉤子方法的順序是：

ngOnChanges：在ngOnInit之前，當數(shù)據(jù)綁定輸入屬性的值發(fā)生變化時。
ngOnInit：在第一次ngOnChanges之后。
ngDoCheck：每次Angular變化檢測時。
ngAfterContentInit：在外部內(nèi)容放到組件內(nèi)之后。
ngAfterContentChecked：在放到組件內(nèi)的外部內(nèi)容每次檢查之后。
ngAfterViewInit：在初始化組件視圖和子視圖之后。
ngAfterViewChecked：在妹子組件視圖和子視圖檢查之后。
ngOnDestroy：在Angular銷毀組件/指令之前。

除此之外，一些組件還提供了自己的生命周期鉤子。例如router有routerOnActivate。

測試生命周期順序的代碼

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
 selector: 'panel',
 inputs: ['title', 'caption'],
 template: '<ng-content></ng-content>'
})
class Panel {
 // 組件輸入屬性值發(fā)生改變（首次調(diào)用一定會發(fā)生在 ngOnInit之前。）
 ngOnChanges(changes) {
  console.log('On changes', changes);
 }
 // 組件初始化完成（在第一輪 ngOnChanges 完成之后調(diào)用。 ( 譯注：也就是說當每個輸入屬性的值都被觸發(fā)了一次 ngOnChanges 之后才會調(diào)用 ngOnInit ，此時所有輸入屬性都已經(jīng)有了正確的初始綁定值 )）
 ngOnInit() {
  console.log('Initialized');
  console.warn('OnChanges和DoCheck鉤子不要同時出現(xiàn)，互斥！。本例僅供學習');
 }
 // 臟值檢測器被調(diào)用后調(diào)用
 ngDoCheck() {
  console.log('Do check');
 }
 // 組件銷毀之前
 ngOnDestroy() {
  console.log('Destroy');
 }
 // 組件-內(nèi)容-初始化完成 PS：指的是ContentChild或者Contentchildren
 ngAfterContentInit() {
  console.log('After content init');
 }
 // 組件內(nèi)容臟檢查完成
 ngAfterContentChecked() {
  console.log('After content checked');
 }
 // 組件視圖初始化完成 PS：指的是ViewChild或者ViewChildren
 ngAfterViewInit() {
  console.log('After view init');
 }
 // 組件視圖臟檢查完成之后
 ngAfterViewChecked() {
  console.log('After view checked');
 }
}

@Component({
 selector: 'app',
 template: `
  <button (click)="toggle()">Toggle</button>
  <div *ngIf="counter % 2 == 0">
   <panel caption="Sample caption" title="Sample">Hello world!</panel>
  </div>
 `,
 directives: [Panel]
})
class App {
 counter: number = 0;
 toggle() {
  this.counter += 1;
 }
}

bootstrap(App);

輸出結(jié)果