Angular 生命周期

ngOnInit()

在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。

export class NGLifeTimeTestChildComponent implements OnChanges, OnInit {
    count: number = 0;

    constructor() {
        this.count = -2;
        console.log('constructor');
    }

    ngOnInit() {
        setTimeout(() => {
            this.count = -1;
        }, 1000);
        console.log('ngOnInit');
    }

    countClick() {
        this.count += 1;
    }
}

• 这段代码会先执行属性赋值，赋值为 0
• 再执行constructor赋值，赋值为 -2
• 再执行ngOnInit，此处用了延时，页面会先展示 -2，1s 后改为-1，所以页面是先显示，再执行ngOnInit 方法

提示: ngOnInit 是获取初始化数据最好的地方

ngOnChanges()

如果组件绑定过输入属性(@Input)，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。如果组件没有任何输入属性则不会调用。当 Angular 设置或重新设置数据绑定的输入属性时会调用，该方法接受当前和上一属性值的 SimpleChanges 对象.这发生的非常频繁，所以你在这里执行的任何操作都会显著影响性能。

ngOnChanges(changes: SimpleChanges) {
  for (const propName in changes) {
      const chng = changes[propName];
      const cur  = JSON.stringify(chng.currentValue);
      const prev = JSON.stringify(chng.previousValue);
  }
}

ngDoCheck()

紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。换句话说，就是任何属性发生变化都会被调用。

export class NGLifeTimeTestChildComponent implements OnChanges, OnInit {
    @Input() hero: string = '';
    @Input() power: string = '';

    changeLog: string[] = [];
    count: number = 0;

    constructor() {
        this.count = -2;
        console.log('constructor');
    }

    ngOnChanges(changes: SimpleChanges) {
    }

    ngOnInit() {
      setTimeout(() => {
        this.count = -1;
      }, 1000);
      console.log('ngOnInit');
    }

    ngDoCheck(){
      console.log('ngDoCheck');
    }

    ngAfterContentInit(){
      console.log('ngAfterContentInit');
    }

    countClick() {
        this.count += 1;
    }
}

• 这段代码中ngDoCheck会在ngOnChanges和ngOnInit之后调用两次
• constructor 给count 赋值不会调用
• ngOnInit 和 countClick 给count 赋值会调用
• 子组件属性发生变化，父组件的DoCheck也会被调用

ngAfterContentInit()

第一次 ngDoCheck() 之后调用，只调用一次。

ngAfterContentChecked()

在ngAfterContentInit() 和每次 ngDoCheck() 之后调用。

ngAfterViewInit()

第一次 ngAfterContentChecked() 之后调用，只调用一次。

ngAfterViewChecked()

ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。

ngOnDestroy()

在 Angular 销毁指令或组件之前立即调用。
可以做以下事情

• 取消订阅可观察对象和 DOM 事件。
• 停止 interval 计时器。
• 反注册该指令在全局或应用服务中注册过的所有回调。