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 - 指令销毁前调用