Angular的生命周期钩子

组件具有由Angular管理生命周期。Angular创建它, 呈现它, 创建并呈现其子级, 在数据绑定属性发生更改时检查它, 并在将其从DOM中删除之前将其销毁。Angular提供了生命周期钩子, 它提供了对这些关键生命时刻的可见性, 以及在它们发生时采取行动的能力。指令具有相同的生命周期钩子。

  1. ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit之前。
  2. ngOninit:在第一轮ngOnChanges完成之后调用。
  3. ngDocheck:在每个Angular变更检测周期中调用。
  4. ngAfterContentInit:当把内容投影进组件之后调用。
  5. ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用。
  6. ngAfterViewInit:初始化完组件视图及其子视图之后调用。
  7. ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用。
  8. ngOnDestory:当 Angular 每次销毁指令或组件之前调用。

其中ngOnChanges、ngOninit、ngDocheck、ngOnDestory四个生命周期也适用于指令。

这些钩子的使用都遵循相似的模式:

为了得到有关这些事件的通知,需要:

  1. 声明组件指令类实现接口
  2. 声明钩子的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钩子在每次变更检测周期后调用。

如果感兴趣,大家可以参考我写的实例

发表评论

电子邮件地址不会被公开。 必填项已用*标注