文章参考

1. angular——生命周期函数

钩子函数介绍

1. 只调用一次的，我们通常可以用于初始化
2. 构造函数不要处理一些业务逻辑，因为此时的HTML还没有创建挂载
3. ngAfterViewInit() 这个阶段可以对DOM节点进行数据和事件绑定

组件声明周期

1. 左侧的图是初始化执行的声明周期顺序
2. 右侧的图是数据发生变化，检测数据变化发生的钩子函数

构造函数

1. 组件运行的最早的函数，比任何一个生命周期函数要早
2. 用于依赖注入service等组件
3. 变量的初始化

必须掌握的

ngOnInit

1. 构造函数之后马上执行复杂的初始化逻辑
2. 在Angular设置完输入属性之后，对该组件进行准备
3. 此时的HTML还没有挂载

ngAfterViewInit

1. 组件试图及其子试图初始化完成之后执行的方法
2. 第一次 ngAfterContentChecked() 之后调用，只调用一次。
3. html已经挂载，我们要操作DOM 节点，应该在这个方法中执行

ngOnDestroy

1. 在 Angular 销毁指令/组件之前调用。
2. 作用，防止内存溢出，应用场景：
   a). 组件初始化有定时器，组件销毁前，清空定时器，防止内存溢出
   b). window.onresize 等对window绑定的事件， 组件销毁前，删除定义的事件，防止内存溢出

需要了解的

ngDoCheck

1. 发生 Angular 无法或不愿意自己检测的变化时作出反应。
2. 在每个 Angular 变更检测周期中调用，ngOnChanges() 和 ngOnInit() 之后。

ngAfterContentChecked

1. 每次完成被投影组件内容的变更检测之后调用。
2. ngAfterContentInit() 和每次 ngDoCheck() 之后调用。

ngAfterViewChecked

1. 每次做完组件视图和子视图的变更检测之后调用。
2. ngAfterViewInit()和每次 ngAfterContentChecked() 之后调用

ngOnChange

1. 当 Angular（重新）设置数据绑定输入属性时响应
2. 该方法接受当前和上一属性值的 SimpleChanges 对象当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit() 之前。

只用于父子组件之间