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

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)用一定會(huì)發(fā)生在 ngOnInit之前。）
 ngOnChanges(changes) {
  console.log('On changes', changes);
 }
 // 組件初始化完成（在第一輪 ngOnChanges 完成之后調(diào)用。 ( 譯注：也就是說當(dāng)每個(gè)輸入屬性的值都被觸發(fā)了一次 ngOnChanges 之后才會(huì)調(diào)用 ngOnInit ，此時(shí)所有輸入屬性都已經(jīng)有了正確的初始綁定值 )）
 ngOnInit() {
  console.log('Initialized');
  console.warn('OnChanges和DoCheck鉤子不要同時(shí)出現(xiàn)，互斥！。本例僅供學(xué)習(xí)');
 }
 // 臟值檢測(cè)器被調(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);