angular组件生命周期

1、ngOnChanges：在ngOnInit之前， 当数据绑定输入属性的值发生变化时调用。 并且有一个SimpleChanges类型的参数，它其实是一个类型为SimpleChange，并且键值为属性名的数组:
2、ngOnInit：在第一次ngOnChanges之后。
3、ngDoCheck：每次Angular变化检测时。
4、ngAfterContentInit：在组件使用 ng-content 指令的情况下，Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
5、ngAfterContentChecked：在组件使用 ng-content 指令的情况下，Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
6、ngAfterViewInit：在组件相应的视图初始化之后调用，它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
7、ngAfterViewChecked：在子组件视图和子视图检查之后。
8、ngOnDestroy：在Angular销毁组件/指令之前。

代码方式

import { Component,Input, OnInit, OnChanges,DoCheck,AfterContentInit, AfterContentChecked, AfterViewChecked,AfterViewInit, OnDestroy} from '@angular/core';

@Component({
  selector: 'app-hook',
  templateUrl: './hook.component.html',
  styleUrls: ['./hook.component.css']
})
export class HookComponent implements OnInit, OnChanges,
   AfterContentInit,DoCheck,
  AfterContentChecked, AfterViewChecked,
  AfterViewInit, OnDestroy  {

  @Input() data;
  constructor() { }
  ngOnChanges(changes) {

    console.log('On changes', changes);
  }
  ngOnInit() {
  }
  // 脏值检测器被调用后调用
  ngDoCheck() {
    console.log('Do check');
  }
  组件销毁之前
  ngOnDestroy() {
    console.log('Destroy');
  }
  // 组件-内容-初始化完成 PS：指的是ContentChild或者Contentchildren
  ngAfterContentInit() {
    console.log('After content init');
  }
  // 组件内容脏检查完成
  ngAfterContentChecked() {
    console.log('After content checked');
  }
  // 组件视图初始化完成 PS：指的是ViewChild或者ViewChildren
  ngAfterViewInit() {
    console.log('After view init');
  }
  // 组件视图脏检查完成之后
  ngAfterViewChecked() {
    console.log('After view checked');
  }

}