角形生命周期钩

Question

我画了一个草图，代表了组件生命周期的流程

使用sketch.io

在完成有关生命周期挂钩的文档后，
我想到了这个草图。现在这是组件中生命周期挂钩的正确顺序吗？

Answer 1

这是我从Angular.io文档中了解的内容。这可能会帮助您。

Answer 2

您提供的草图有点正确。供您参考，我尝试实现每个钩子。为了确定它们的发生点，我将它们每个都记录到了控制台。

供您参考，下面是我的控制台的屏幕截图，因为我允许我的应用程序一个接一个地加载和跟踪每个生命周期。

这是页面第一次加载时的控制台。

因此，在此生命周期中如此调用的组件具有自己的功能：

1)构造函数：在类被实例化时调用的默认方法。

2) ngOnChanges：在创建新组件时执行，当带有@Input 的绑定属性之一发生变化时，它也是唯一一个在调用时接受参数的钩子，称为 SimpleChanges。

3) ngOnInit : 组件初始化后调用。这不允许组件在 DOM 上可见。这在构造函数之后运行。

4) ngDoCheck：在更改检测运行时运行。如果没有变化，它也会运行，即使它只是发生了一个事件，以防万一，以确保是否有某些事情发生了变化。（例如：它会在按钮点击事件之后运行，而不管它是否正在改变蚂蚁） 5）ngAfterContentInit：这在 content(ng-content) 被投影到视图之后被调用。

6) ngAfterContentChecked：在检查每个投影内容后调用此方法。

7) ngAfterViewInit：在组件视图（和子视图）初始化后调用。

8) ngAfterViewChecked：每次检查视图（和子视图）时调用。

在下图中，当我单击“食谱书”导航栏标题（左上角的链接）时查找控制台：

我们可以清楚地看到“ngDoCheck”被调用，然后是“ngAfterContentChecked”，最后是“ngViewChecked”。如果您注意到 'ngAfterContentInit' 和 'ngViewInit' 仅在内容最终投影到视图时才被调用。它们与发生的相应变化无关。

9) ngOnDestroy：当我们通常使用 if 条件并相应地渲染组件时调用。这主要在对象被角度破坏之前调用。

请参阅下图并查找当我单击“销毁第一个组件”按钮时消失的配方信息卡之一：

这里 'ngOnDestroy' 被调用，然后是 'ngDoCheck' 和其他后面的钩子。这将倾向于再次调用循环，但随后不会呈现被破坏的内容。（仅供参考，这里我刚刚使用了一个拼接方法来破坏渲染的内容之一）

如果需要，我也可以提供代码，希望这可以帮助您和其他人了解 Angular 中生命周期钩子的功能。:)

PS 请忽略该页面截图上的其余元素。

Answer 3

ngOnChanges()不会在 后调用 constructor ，而是在运行更改检测并且更改检测更新后调用@Input()。运行更改检测时
也会调用。在第一次被调用之后被调用。ngDoCheck()
ngOnInit()ngOnChanges()

另请参阅https://angular.io/guide/lifecycle-hooks