角度生命周期钩子

Question

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

  

使用sketch.io

完成关于生命周期钩子的the docs后的

我想出了这个草图。 现在，这是组件中生命周期挂钩的正确顺序吗？

Answer 1

您提供的草图有些正确。供您参考，我尝试实现每个挂钩。为了确定它们的出现点，我将它们分别记录到控制台。

作为参考，下面是我的控制台的屏幕截图，因为我允许我的应用程序一个接一个地加载并遵循每个生命周期。

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

因此，在此生命周期中这样调用的组件具有其自身的功能：

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中生命周期挂钩的功能。 ：）

P.S。请忽略该页面屏幕快照上的其余元素。

Answer 2

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

Answer 3

ngOnChanges()未在constructor之后调用，在运行更改检测后调用它并且更改检测已更新为@Input()。 运行更改检测时也会调用ngDoCheck() 在第一次调用ngOnInit()后调用ngOnChanges()。

另见https://angular.io/guide/lifecycle-hooks