乐趣区

关于angular:Angular-组件生命周期

jiezi

当 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 销毁该指令之前运行。
这里是开释资源的中央，这些资源不会主动被垃圾回收。如果你不这样做，就存在内存透露的危险。

总结

了解组件的生命周期有助于了解组件的执行流程，组件的初始化过程，同时在本人写组件时也能够依据须要在组件初始化的特定期间退出一些须要的操作

退出移动版