组件具有由 Angular 管理生命周期。Angular 创建它, 呈现它, 创建并呈现其子级, 在数据绑定属性发生更改时检查它, 并在将其从 DOM 中删除之前将其销毁。Angular 提供了生命周期钩子, 它提供了对这些关键生命时刻的可见性, 以及在它们发生时采取行动的能力。指令具有相同的生命周期钩子。
ngOnChanges：当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit之前。ngOninit：在第一轮ngOnChanges完成之后调用。ngDocheck：在每个 Angular 变更检测周期中调用。ngAfterContentInit：当把内容投影进组件之后调用。ngAfterContentChecked：每次完成被投影组件内容的变更检测之后调用。ngAfterViewInit：初始化完组件视图及其子视图之后调用。ngAfterViewChecked：每次做完组件视图和子视图的变更检测之后调用。ngOnDestory：当 Angular 每次销毁指令或组件之前调用。
其中 ngOnChanges、ngOninit、ngDocheck、ngOnDestory 四个生命周期也适用于指令。
这些钩子的使用都遵循相似的模式：
为了得到有关这些事件的通知，需要：
- 声明组件指令类实现接口
- 声明钩子的 ng 方法 (如
ngOnInit)
每个方法名称都是 ng 加上钩子的名称。例如，对 OnInit 我们要声明 ngOnInit 方法, AfterContentInit 要声明 ngAfterContentInit 方法，以此类推。
当 Angular 知道组件实现这些函数时, 它将在适当的时候调用它们。
OnInit 和 OnDestroy
在初始化组件属性以及初始化任何子组件属性之前调用 OnInit 钩子。
同样, 当指令实例被销毁时, 调用 OnDestroy 钩子。如果每次销毁指令时需要进行清理, 则通常使用此方法。
OnChanges 和 DoCheck
在我们的一个或多个组件属性被更改后调用 OnChanges 钩子。ngOnChanges 方法接收一个参数, 它指示哪些属性已更改。
每当 Angular 变化检测机制注意到任何指令属性发生更改时, OnChanges 实现的默认通知系统都会触发。但是, 有时此更改通知添加的开销可能太大, 特别是如果性能是一个问题。
有时, 我们只是想做一些事情, 以防一个项目被删除或添加, 或者如果只有一个特定的属性改变, 例如。
如果我们遇到上述情况之一, 我们就可以使用 DoCheck 方法。
注意：OnChanges 钩子会被 DoCheck 钩子重写。因此, 如果我们实现这两个钩子, OnChanges 将被忽略。
变更检测
为了找出有哪些改变, Angular 提供不同 differ。differ 会对组件的特定属性进行计算，以确定它是否更改。
有两种类型的内置 differs: 迭代 differ、键值对 differ。
声明钩子的 ng 方法 (如 ngOnInit)
AfterXXX
AfterContentInit 钩子在 OnInit 之后调用, 在组件的内容初始化完成之后。
AfterContentChecked 的工作原理类似, 不过它是在组件检查完成后调用。这里的 检查 是指检查是变更检测系统的检查。
其他两个钩子：AfterViewInit 和 AfterViewChecked 是在上面的视图完全初始化之后触发的。这两个方法仅适用于组件, 而不适用于指令。
此外, AfterXXXInit 钩子在指令生命周期中只调用一次, 而 AfterXXXChecked 钩子在每次变更检测周期后调用。
如果感兴趣，大家可以参考我写的实例。
评论 (0)