Angular中的生命周期函数(下)

上文可以点击这里，这一篇写剩下的三个，在此之前还是附上官方文档。

ngAfterViewInit()

当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。 第一次 ngAfterContentChecked() 之后调用，只调用一次。

简单来说就是当组件视图渲染完成后调用，也就是说在这个函数执行之前是没有办法获取到HTML里面的内容的。举个例子,我们想获取视图里的一个div结点, 可以通过ViewChild, 然后尝试在ngOnInit和ngAfterViewInit中去打印。

<div #div>I am a div</div>

export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('div') divElement: ElementRef<HTMLDivElement>;
  ngOnInit(): void {
    console.log('ngOnInit', this.divElement);
  }
  ngAfterViewInit(): void {
    console.log('ngAfterViewInit', this.divElement);
  }
}

得到的结果如图：

ngAfterViewChecked()

每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。 ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。

举个例子：

<button (click)="display = !display">click me</button>

export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
  @ViewChild('div') divElement: ElementRef<HTMLDivElement>;
  firstName = 'toto';
  display = false;

  ngOnInit(): void {
    console.log('ngOnInit', this.divElement);
  }
  ngAfterViewInit(): void {
    console.log('ngAfterViewInit', this.divElement);
  }

  ngAfterViewChecked(): void {
    console.log('ngAfterViewChecked');
  }
}

从结果中可以发现，的确AfterViewChecked是在ngAfterViewInit之后调用的。我在试图中添加了一个按钮，点击按钮会改变一个变量display的值，每次点击都会调用一次AfterViewChecked，及时这个行为并不会改变试图，但它触发了angular的change detection(变更检测)。

ngOnDestroy()

在 Angular 销毁指令或组件之前立即调用。

这里应该比较好理解了，组件销毁之前如果有什么事情需要做的，就可以放在这个函数里面。