组件生命周期钩子

直接上代码：然后看钩子的执行顺序：

import {
  AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, DoCheck, Input, OnChanges,
  OnDestroy,
  OnInit, SimpleChanges
} from '@angular/core';
let logIndex:number=1;
@Component({
  selector: 'app-life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.css']
})
export class LifeComponent implements OnInit ,OnChanges,DoCheck,AfterContentInit,AfterContentChecked,AfterViewChecked,AfterViewInit,OnDestroy{
 @Input()
 name:string;
  logIt(msg:string){
  console.log(`#${logIndex++} ${msg}`);
 }
  constructor() {
    this.logIt("name属性在构造函数里面的值是"+name);
  }
  ngAfterContentInit(): void {
    this.logIt("ngAfterContentInit");
  }

  ngAfterContentChecked(): void {
    this.logIt("ngAfterContentChecked");
  }

  ngAfterViewChecked(): void {
    this.logIt("ngAfterViewChecked");
  }

  ngAfterViewInit(): void {
    this.logIt("ngAfterViewInit");
  }

  ngOnDestroy(): void {
    this.logIt("ngOnDestroy");
  }
  ngDoCheck(): void {
    this.logIt("ngDoCheck");
  }

  ngOnChanges(changes: SimpleChanges): void {
    let name=changes['name'].currentValue;
    this.logIt("name在ngOnChanges的值是"+name);
  }



  ngOnInit() {
    this.logIt("ngOnInit");
  }

}

执行后：