角度实际上是如何触发生命周期钩子的？答案

【问题标题】：How does angular actually trigger the life-cycle hooks?角度实际上是如何触发生命周期钩子的？
【发布时间】：2017-11-20 15:44:52
【问题描述】：

在组件生命周期中，我们有不同的接口来跟踪组件的不同阶段
生命周期，例如。 OnInit、OnChanges、OnDestroy..etc
在运行时角度如何触发这些方法？

例如。 ngOnChanges() 在 @Input 数据更改时触发
现在 Angular 有这个逻辑 我假设
1- 每当角度检测 @input 数据中的变化
2- 角度检查此组件类是否实现 OnChanges
3- 如果为真则触发 ngOnChanges()

每个生命周期钩子都有一些逻辑
这是角度触发生命周期钩子的方式吗？

【问题讨论】：

你看过文档了吗？

标签： angular lifecycle

【解决方案1】：

好问题！ Angular 的生命周期钩子由 @angular/core 库 [source] 实现。

为了证明这一点，运行一个angular cli 项目并在（可选chrome）开发工具中，在生命周期钩子中放置一个换行符，如下所示：

刷新页面以捕获断点，从而查看调用堆栈：

Angular 团队显然写了冗长的代码，所以我认为不需要解释下面调用ngOnInit() 的语句的逻辑：

if ((view.state & ViewState.FirstCheck) && (def.flags & NodeFlags.OnInit)) {
    directive.ngOnInit();
}

这个函数的不错的打字稿版本可以在here找到。

【讨论】：

【解决方案2】：

Angular.io 记录如下图，

这说明了生命周期钩子的层次结构

【讨论】：

【解决方案3】：

图表包含所有 8 个生命周期钩子（方法）的列表以及它们执行的顺序。

应用程序首先通过调用其构造函数来实例化组件或指令，然后调用生命周期钩子。

黑色箭头表示实例化时遵循的路径。
加载组件或指令后，如果输入数据有任何变化，则所遵循的路径由红色箭头表示。

【讨论】：