组件生命周期钩子

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

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");  }}

执行后：