Angular学习笔记54：Angular的生命周期钩子调用顺序探究

在Angular中，每一个组件都是通过Angular的管理着其自身的生命周期。Angular创建组件，渲染组件，如果当前组件有子组件，还会创建、渲染其子组件。在组件的属性发生变化的时候，进行检查，并在组件从DOM移除前销毁组件。而生命周期钩子就是在这些生命周期过程中，Angular将这些生命周期的时刻暴露出来，然后在相应的时刻，开发人员就可以采取相应的措施。

探索生命周期的钩子

1. 新建一个组件

wujiayudeMacBook-Pro:pages wjy$ ng g c lifecycle-hooks
CREATE src/app/pages/lifecycle-hooks/lifecycle-hooks.component.less (0 bytes)
CREATE src/app/pages/lifecycle-hooks/lifecycle-hooks.component.html (34 bytes)
CREATE src/app/pages/lifecycle-hooks/lifecycle-hooks.component.spec.ts (685 bytes)
CREATE src/app/pages/lifecycle-hooks/lifecycle-hooks.component.ts (305 bytes)
UPDATE src/app/pages/pages.module.ts (2049 bytes)

2. 引用各种各样的生命周期钩子,并做好输出标记

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

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

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('this is ngOnChanges');
  }

  ngOnInit() {
    console.log('this is ngOnInit');
  }

  ngDoCheck(): void {
    console.log('this is ngDoCheck');
  }

  ngAfterContentInit(): void {
    console.log('this is ngAfterContentInit');
  }

  ngAfterContentChecked(): void {
    console.log('this is ngAfterContentChecked');
  }

  ngAfterViewInit(): void {
    console.log('this is ngAfterViewInit');
  }

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

  ngOnDestroy(): void {
    console.log('this is ngOnDestroy');
  }

}

保存运行以后，看控制台输出：

此时会发现钩子：ngOnChanges()并没有执行，那是因为当前的组件并没有绑定任何属性。

绑定一个属性，探索ngOnChanges()

1. 修改类文件

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

@Component({
  selector: 'app-lifecycle-hooks',
  templateUrl: './lifecycle-hooks.component.html',
  styleUrls: ['./lifecycle-hooks.component.less']
})
export class LifecycleHooksComponent implements OnChanges, OnInit,
  DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input() name: string;

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
    console.log('this is ngOnChanges');
  }

  ngOnInit() {
    console.log('this is ngOnInit');
  }

  ngDoCheck(): void {
    console.log('this is ngDoCheck');
  }

  ngAfterContentInit(): void {
    console.log('this is ngAfterContentInit');
  }

  ngAfterContentChecked(): void {
    console.log('this is ngAfterContentChecked');
  }

  ngAfterViewInit(): void {
    console.log('this is ngAfterViewInit');
  }

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

  ngOnDestroy(): void {
    console.log('this is ngOnDestroy');
  }

}

2. 进行属性绑定：
   将这个组件作为子组件放置在其他组件中，这里放在原来的父子组件传值的组件里。

修改组件ParentComComponent模版文件

<nz-row>
  <nz-form-label nz-col nzOffset="3" [nzSpan]="3">
    父组件
  </nz-form-label>
  <nz-form-control nz-col nzSpan="5">
    <button nz-button (click)="parentEvent()">父组件的按钮</button>
  </nz-form-control>
</nz-row>
<hr/>
<nz-row>
  <nz-col nzOffset="3">
    <app-child-com>
      <h2>children h2</h2>
    </app-child-com>
  </nz-col>
</nz-row>

<h2>h1Test</h2>


<nz-divider nzText="Angular生命周期钩子"></nz-divider>
<app-lifecycle-hooks [name]="'Angular生命周期钩子'"></app-lifecycle-hooks>

保存运行：

ngOnDestroy钩子的调用

当切换页面、ngIf的时候就相当于组件销毁了，就会发现ngOnDestroy钩子的调用.

Angular生命周期的钩子执行顺序

生命周期钩子接口	钩子	用途
OnChanges	ngOnChanges(changes: SimpleChanges)	在组件有绑定值的时候，在绑定值发生变化的时候调用，在ngOninit()之前，任何一个、多个绑定值发生变化的时候都会调用,在这个钩子中，可以有一个SimpleChanges类型的参数，这个参数可以看到绑定的是和上一次发生变化，并可以判断是否是第一次变化。
OnInit	ngOnInit()	组件在数据、指令、组件绑定完成以后，初始化组件、指令，在第一轮ngOnChanges调用完了以后才开始调用，特别注意这个只调用一次
DoCheck	ngDoCheck()	在Angular中无法检测或者非正常情况下进行检测变化，紧跟在ngOnChanges()和ngOnInit()后调用
AfterContentInit	ngAfterContentInit()	在Angular将外部内容投影进来以后进行调用，第一次ngDoCheck()调用完成以后才开始调用这个生命周期的钩子，并且这个生命周期的钩子只调用一次
AfterContentChecked	ngAfterContentChecked()	当Angular完成被投影组件的内容变更检测以后调用，在ngAfterContentInit()和ngDoCheck()之后调用
AfterViewInit	ngAfterViewInit()	当Angular完成组件视图、子组件视图以后调用，第一次ngAfterContentChecked()之后调用，注意只调用一次
AfterViewChecked	ngAfterViewChecked()	在Angular完成组件的视图、子组件的视图检测以后调用，在ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
OnDestroy	ngOnDestroy()	在Angular销毁组件、指令之前调用并清扫