Angular 生命周期钩子

Question

我画了一张草图，表示组件生命周期的流程。

使用sketch.io

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

- Raed Khalaf

---

文档中有什么不清楚的地方吗？ - user663031

不，文档很棒，但我只需要验证一下我的生命周期钩子的理解。 - Raed Khalaf

Answer 1

以下是我从Angular.io文档中所理解的内容，希望对您有所帮助。

- mansoor

Answer 2

您提供的草图有一定正确性。为了参考，我尝试实现了每个钩子。为了确定它们的发生点，我在控制台中记录了每个钩子。以下是我的控制台截图，当我允许应用程序加载并按顺序跟踪每个生命周期时，可以参考。

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

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

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

2)ngOnChanges：在创建新组件时执行，当绑定的@Input属性之一更改时执行，它是唯一带有参数（称为SimpleChanges）的钩子。

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

4)ngDoCheck：在变更检测运行时运行。即使没有任何更改，它也会运行，甚至是发生的事件，以确保是否有更改。（例如：它将在按钮单击事件之后运行，无论它是否进行任何更改）

5)ngAfterContentInit：在内容（ng-content）投影到视图后调用。

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

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

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

在下面的图片中，当我点击位于左上角的“Recipe Book”导航栏标题链接时，请注意控制台：

我们可以清楚地看到，在最后调用了'ngDoCheck'，接着是'ngAfterContentChecked'，然后是'ngViewChecked'。如果您注意到，'ngAfterContentInit'和'ngViewInit'仅在内容最终被投影到视图时开始调用。它们与相应的更改无关。

9)ngOnDestroy：通常在使用if条件并根据条件呈现组件时调用。这主要在对象被Angular销毁之前调用。

请参考下面的图片，并查找作为我单击“销毁第一个组件”按钮而消失的食谱信息卡之一：

在这里，“ngOnDestroy”被调用，然后是“ngDoCheck”和其他后续挂钩。这将导致循环再次调用，但是销毁的内容不会被渲染。（顺便提一下，我只是使用了一个splice方法来销毁其中一个已呈现的内容） 我也可以提供代码（如果需要），希望这能帮助您以及其他人理解Angular中生命周期挂钩的功能。 :) P.S. 请忽略页面截图上的其余元素。

- Shivam Shukla

---

这不是来自Maximilian Schwarzmüller的食谱项目吗 :D - Kanishk Tanwar

没错！就是那个食谱项目。 :D - Shivam Shukla

这个例子并没有解释它的主要点，那就是为什么它被称为什么？？？它有什么用处，什么时候使用它？？ - ieXcept

你好@ieXcept，你在哪里看到Raed Khalaf先生质疑为什么和何时需要调用生命周期钩子函数？他的意图是验证他提供的草图是否正确。这就是我在我的回答中所陈述的所有理解和截图。至于你的问题，这些应该何时被调用完全取决于“你”的使用情况。我建议你对这些钩子函数有一个清晰的理解。这可能会帮助你自己回答你的问题。谢谢！ :) - Shivam Shukla

Answer 3

ngOnChanges()在constructor之后不会被调用，它会在变更检测运行并更新@Input()后被调用。
同样地，ngDoCheck()会在变更检测运行时被调用。
ngOnInit()会在第一次调用ngOnChanges()后被调用。

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

- Günter Zöchbauer

---

每当 '@Input' 发生变化时，ngOnChanges() 就会被调用，在构造函数执行后，Angular 会设置 '@Input' 数据，这意味着触发 ngOnChanges()。 - Raed Khalaf

如果一个组件里没有 @Input()，那么 ngOnChanges() 就不会被调用（虽然我还没有验证过）。 - Günter Zöchbauer

我并不“仅仅”关注于纯粹的及时顺序，我只是从不同的角度研究生命周期钩子， 非常感谢您的帮助 :) - Raed Khalaf

如果没有 '@Input()'，那么 ngOnChanges() 就不会被调用，我试过了。 - Raed Khalaf

@Raed 你确定 ngOnChanges() 在没有 @Input() 的情况下不会被调用吗？ - ieXcept