Angular 组件生命周期 angular

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期
官方文档链接
响应生命周期事件
可以通过实现一个或多个 Angular core 库中定义的生命周期钩子接口来响应组件或指令生命周期中的事件。这些钩子让你有机会在适当的时候对组件或指令实例进行操作。比如，OnInit 接口的钩子方法叫做 ngOnInit()。如果你在组件或指令类中实现了这个方法，Angular 就会在首次检查完组件或指令的输入属性后，紧接着调用它。
生命周期的顺序
ngOnChanges()->ngOnInit()->ngDoCheck()->ngAfterContentInit()->ngAfterContentChecked()->ngAfterViewInit()->ngAfterViewChecked()->ngOnDestroy()

文章图片

1.变更检测钩子 ngOnChanges() 当 Angular 设置或重新设置数据绑定的输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象,一旦检测到该组件或指令的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法

ngOnChanges(changes: SimpleChanges){ console.log(changes); }

文章图片

即使@input()不使用set方法也可以多次检测到变化
2.初始化组件或指令 ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
在构造函数外部执行复杂的初始化。组件的构造应该既便宜又安全。比如，你不应该在组件构造函数中获取数据。当在测试中创建组件时或者决定显示它之前，你不应该担心新组件会尝试联系远程服务器。
Angular 会在调用 ngOnInit() 之前调用 ngOnChanges()，而且之后还会调用多次。但它只调用一次 ngOnInit()
3.自定义变更检测 ngOnCheck() ngDoCheck执行时机
以下四种情况，Angular 是会为这个组件或者它的子组件执行变化检测
1.组件的 @Input() 引用发生变化。
2.组件的 DOM 事件，包括它子组件的 DOM 事件，比如 click、submit、mouse down 等事件。
3.Observable 订阅事件，同时设置 Async pipe。
4.ChangeDetectorRef.detectChanges()，ChangeDetectorRef.markForCheck()、ApplicationRef.tick()，手动调用这三种方式触发变化检测。
ngOnCheck()
检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应
紧跟在每次执行变更检测时的 ngOnChanges() 和首次执行变更检测时的 ngOnInit() 后调用
可以解决某些无法自动检测到变更的问题，如传入数组的情况
可以在ngOnCheck()方法中实现自己的变更检查逻辑，如

ngDoCheck(){ if(this.oldName !== this.currentName){ // 执行操作 } }

通过检测currentName和oldName是否相同判断数据是否发生变化
注意：不建议与ngOnChanges同时使用
如果在ngOnCheck中不定义自己的检测逻辑，也可以当做自动检测变更的方法来使用，可以在里面直接执行需要的操作。
响应被投影内容的变更 ngAfterContentInit()
当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。
第一次 ngDoCheck() 之后调用，只调用一次
内容投影是从组件外部导入 HTML 内容，并把它插入在组件模板中指定位置上的一种途径。可以在目标中通过查找下列结构来认出内容投影。
ngAfterContentChecked()
每当 Angular 检查完被投影到组件或指令中的内容之后调用
ngAfterContentInit() 和每次 ngDoCheck() 之后调用
响应视图变更 ngAfterViewInit()
当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。
第一次 ngAfterContentChecked() 之后调用，只调用一次。
ngAfterViewChecked()
每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
实例销毁 ngOnDestroy(）
把清理逻辑放进 ngOnDestroy() 中，这个逻辑就必然会在 Angular 销毁该指令之前运行。
这里是释放资源的地方，这些资源不会自动被垃圾回收。如果你不这样做，就存在内存泄漏的风险。
总结
【Angular 组件生命周期】理解组件的生命周期有助于理解组件的执行流程，组件的初始化过程，同时在自己写组件时也可以根据需要在组件初始化的特定时期加入一些需要的操作