生命周期函数简介

简介

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

分类

调用顺序

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

如何实现

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

export class XxxComponentsimplementsOnInit,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学习笔记（一） — 之安装教程

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