生命周期函数简介

当前版本：6.0.0-build

简介

指令和组件的实例有一个生命周期：新建、更新和销毁。通过实现一个或多个 Angular core 库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。

分类

指令与组件共有的钩子
- ngOnChanges
- ngOnInit
- ngDoCheck
- ngOnDestroy
组件特有的钩子
- ngAfterContentInit
- ngAfterContentChecked
- ngAfterViewInit
- ngAfterViewChecked

调用顺序

ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法，用于 angular 检测不到的或者不想检测的
ngAfterContentInit - 在组件内容初始化之后调用，第一次 ngDoCheck() 之后调用，只调用一次。
ngAfterContentChecked - 组件每次检查内容时调用，在每次调用 AfterContentInit 之后调用和每次的 Docheck 之后调用
ngAfterViewInit - 初始化完组件视图及其子视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次。
ngAfterViewChecked - 每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
ngOnDestroy - 在 Angular 销毁指令/组件之前调用。

如何实现

要实现生命周期钩子，只需实现对应的接口即可，如实现 ngOnChanges 钩子只需实现 OnChanges 接口即可：

export class XxxComponents
  implements
    OnInit,
    OnChanges,
    DoCheck,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy {
  ngOnInit(): void {
    console.log("我是 ngOnInit");
  }

  ngOnChanges(): void {
    console.log("我是 OnChange");
  }

  ngDoCheck(): void {
    console.log("我是 ngDoCheck");
  }

  ngAfterContentInit(): void {
    console.log("我是 ngAfterContentInit");
  }

  ngAfterContentChecked(): void {
    console.log("我是 ngAfterContentChecked");
  }

  ngAfterViewInit(): void {
    console.log("我是 ngAfterViewInit");
  }

  ngAfterViewChecked(): void {
    console.log("我是 ngAfterViewChecked");
  }

  ngOnDestroy() {
    console.log("我是 ngOnDestroy");
  }
}

结果如下

ngOnChanges()

OnChanges只对输入的不可变对象起作用。输入属性：使用@Input装饰的属性。这里还需要注意不可变对象，在 Angular 中，典型的不可变对象是string类型，但所有自定义对象均为可变对象，如：user:{name:string}，可变对象即使被定义为输入属性，也不会触发OnChanges方法。

ngOnChanges 方法参数

一旦检测到该组件(或指令)的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法。 ngOnChanges方法有一个SimpleChanges类型的参数，它其实是一个类型为SimpleChange，并且键值为属性名的数组:

export interface SimpleChanges { [propName: string]: SimpleChange; }

该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。

OnInit() 钩子

使用OnInit()有两个原因: 1. 在构造函数之后马上执行复杂的初始化逻辑 2. 在Angular设置完输入属性之后，对该组件进行准备。

另外还要记住，在指令的构造函数完成之前，那些被绑定的输入属性还都没有值。如果你需要基于这些属性的值来初始化这个指令，这种情况就会出问题。而当 ngOnInit() 执行的时候，这些属性都已经被正确的赋值过了。

OnDestroy() 钩子

清理一些逻辑###必须###在Angular销毁指令之前运行，把它们放在ngOnDestory()中。这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。取消那些对可观察对象和 DOM 事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。如果不这么做，就会有导致内存泄露的风险。路由跳转时。当一个路由地址跳往另一个路由地址时，前一个路由地址对应的组件会被销毁，后一个路由对应的组件会被创建。

DoCheck() 钩子

使用 DoCheck 钩子来检测那些 Angular 自身无法捕获的变更并采取行动。

DoCheck() 钩子的开销很恐怖，在每次变更检查周期之后，发生变化的地方都会调用它.

AfterView 钩子

AfterView 展示AfterViewInit()和AfterViewChecked()钩子。

angular会在每次创建子组件的子视图后调用它们。

AfterContent 钩子

AfterContent 展示了AfterContentInit()和AfterContentChecked()钩子。

Angular 会在外来内容被投影到组件中之后调用它们。

总结

Angular学习笔记（一） --- 之安装教程

系列学习文章还是继续更新，欢迎小伙伴加入。