关于angular中的生命周期函数

生命周期函数，也叫生命周期钩子。

Angular的每个组件（包括根组件和子组件）都存在一个生命周期，从创建、更新、到销毁，Angular提供组件生命周期钩子函数，

组件的生命周期从实例化组件类并渲染组件视图及其子视图开始，到Angular销毁组件实例并从DOM中移除它渲染的模板时生命周期结束.

constructor()

constructor并不是生命周期函数，但是每个Angular组件都会有一个constructor函数，当应用通过调用构造函数来实例化一个组件或者指令时，组件的生命周期就开始了，Angular就会在生命周期中适当的时机调用对应的生命周期函数。

Angular官方文档中并不推荐开发者在构造函数中执行除了依赖注入之外的其他操作。

ngOnChanges()

首次调用一定会发生在ngOnInit()方法之前
当组件中有@Input() xxx属性，并且它的值发生变化时才会调用，否则不会调用。
！！！当@Input() xxx输入属性为一个对象时，只有对象的属性值发生变化时也不会调用NGOnChanges函数，只有当对象的引用发生变化时才会触发

ngOnChanges(changes: SimpleChanges){for(const propName in changes){const chng = changes[propName];const cur = JSON.stringify(chng.currentValue);const prev = JSON.stringify(chng.priviousValue);this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);}
}

// 上段代码中对应的SimpleChanges
interface SimpleChanges {__index (propName: string): SimpleChange
}

// 上段代码中对应的SimpleChange
class SimpleChange {constructor(previousValue: any, currentValue: any, firstChange: boolean);previousValue: any;currentValue: any;firstChange: boolean;isFirstChange(): boolean; // 检测新值是否是首次赋值，返回一个boolean类型是结果
}

上面代码是Angular文档中演示ngOnChanges钩子的一段代码，ngOnChanges函数接受了一个SimpleChanges对象，并把每个发生变化的属性名映射到这个对象。

ngOnInit()

用于初始化组件、指令。通常在ngOnInit函数中做一些初始化的工作。

1、只调用一次
2、在第一轮ngOnChanges函数调用完成之后再调用。（组件中所有的@Input() 属性的值都触发过一次NGOnChanges函数之后才会调用ngOnInit函数）。
3、如果组件中没有输入属性，不执行ngOnChanges函数也会触发ngOnInit函数

ngDoCheck()

用于变更检测，紧跟在每次变更检测时的ngOnChanges和首次执行的ngOnInit后面调用。当浏览器中的异步事件触发检测机制时，检测模板绑定属性，如果有改变则进行响应更新。

ngAfterContentinit()

当Angular把外部内容投影金组件视图或者指令所在的视图之后调用（第一次调用ngDoCheck后调用，并且只调用一次）

ngAfterContentChecked()

当Angular检查完贝投影到组件或者指令中的内容之后调用（ngAfterContentInit和每次ngDoCheck之后调用）

ngAfterViewInit()

当Angular初始化完成组件视图及其子视图或者包含该指令的视图后调用。

开发中如果需要在js代码中操控DOM元素，我一般会在这个函数中获取对应的DOM节点

ngAfterViewChecked()

当Angular完成组件视图和子视图的变更检测之后调用

ngOnDestroy()

当Angular每次销毁指令或组件时调用
ngOnDestroy函数中的逻辑，一定会在Angular销毁该指令之前执行。在开发中这个地方一般会用来释放资源避免内存泄漏。

比如：

• 取消电鱼可观察对象和DOM事件
• 停止interval计时器
• 反注册该指令在全局或应用服务中注册过的所有回调
• 通知用用的其他部分，该组件即将销毁