angular的生命周期函数(面试题)

Angular 指令的生命周期，它是用来记录指令从创建、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子，便于我们监控指令生命周期的变化，并执行相关的操作。Angular 中所有的钩子如下图所示：

生命周期函数	作用
ngOnChanges()	初始化输入属性 ，Angular（重新）设置数据绑定输入属性时的响应。该方法接收 SimpleChanges 当前和先前属性值的对象。ngOnInit() 在一个或多个数据绑定输入属性发生更改 之前和之后调用。
ngOnInit()	初始化其他属性，在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一次之后 调用一次 ngOnChanges() 。
ngDoCheck()	组件变更检测，检测 Angular 无法或不会自行检测的更改并采取相应措施。在每次更改检测运行期间，在 ngOnChanges() 和之后立即调用 ngOnInit()。
ngAfterContentInit()	投影内容初始化，在 Angular 将外部内容投影到组件的视图/指令所在的视图后进行响应。在第一次之后 调用一次 ngDoCheck()。if you want to change the child component’s props, you cannot do it in ‘ngAfterViewInit’, you need to do it in ‘ngAfterContentInit’.
ngAfterContentChecked()	针对投影内容的变更检测在 Angular 检查投射到指令/组件中的内容后响应。在 ngAfterContentInit() 随后和随后的每一次调用之后 ngDoCheck()。
ngAfterViewInit()	初始化完组件视图及其子视图之后调用 ，在 Angular 初始化组件的视图和子视图/指令所在的视图后响应。在第一次之后 调用一次 ngAfterContentChecked()。一般进行 DOM 操作
ngAfterViewChecked()	每次做完组件视图和子视图的变更检测之后调用，在 Angular 检查组件的视图和子视图/指令所在的视图后响应。在 ngAfterViewInit() 随后和随后的每一次调用之后 ngAfterContentChecked()。
ngOnDestroy()	当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏，就在 Angular 破坏指令/组件之前进行清理。取消订阅 Observable 并分离事件处理程序以避免内存泄漏。在 Angular 破坏指令/组件之前 调用。组件销毁时执行

注意：init 相关，只会初始化执行一次，但是 check 相关每次数据改变都会执行，可以在其中做一些自定义的操作，例如数据检测

指令与组件共有的钩子

ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy

组件特有的钩子

ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked

调用顺序

ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法，用于检测和处理值的改变
ngAfterContentInit - 在组件内容初始化之后调用
ngAfterContentChecked - 组件每次检查内容时调用
ngAfterViewInit - 组件相应的视图初始化之后调用
ngAfterViewChecked - 组件每次检查视图时调用
ngOnDestroy - 指令销毁前调用