Angular 2+ 的组件生命周期（二）

参考资料：组件的生命周期

在Angular框架中，一个组件的生命周期可分为若干个阶段，并提供了若干个钩子 供组件的开发者在合适的时机注入代码：

Angular组件的生命周期

从上图可以看出，框架预留的钩子主要集中在变化检测周期里。在每个变化检测周期， 框架依次会调用以下钩子：

• ngOnChanges：组件的输入属性值发生变化时触发。
• ngDoCheck：为组件提供一个自行检查模型变化的时机 —— 意思是Angular有可能 会检查不出来模型的变化，这时你得自己干。
• ngAfterContentChecked：组件投射内容的变化检测及更新完成后触发。
• ngAfterViewChecked：组件视图的变化检测及更新完成后触发。

如果是组件创建之后的第一个检测周期，那么框架将依次按上图中的顺序调用以下 钩子：

• ngOnInit：当组件的输入属性就绪后触发。
• ngAfterContentInit：当组件的投射内容就绪后触发。
• ngAfterViewInit：当组件的视图就绪后触发。

当组件被销毁时（例如，使用 NgIf 指令将其移除），将触发 ngOnDestroy 钩子。

关于Angular如何错过模型的变化，以及什么是投射内容，将在后续内容中讲述。这里 要强调的是，组件的各种生命周期钩子，都是在变化检测周期中触发的，只是在第一次 进入检测周期时，额外执行了三个初始化钩子。

在每个检测周期中，这些钩子总是按照上图中的先后顺序执行。其中最常用的是 ngAfterViewInit 和 ngOnChanges。在Angular中很多操作都需要在视图就绪 后执行，因此 ngAfterViewInit 提供了一个注入代码的好时机。而 ngOnChanges 钩子则在组件的属性值变化时触发，这是一个无状态组件（没有内部模型）更新其 逻辑的好时机。