Question

在Angular 2+中， ngDoCheck 和 ngAfterViewChecked 似乎执行相同的功能。据说只要触发了变化检测，就会调用ngDoCheck。现在，在View中更改将触发此更改检测。根据文档，只要视图发生更改，就会调用ngAfterViewChecked。

当一个生命周期钩子足够时，需要两个生命周期钩子吗？

Answer 1

DoCheck挂钩允许您集成到更改检测周期中，并在对象引用或Angular未自动检测到更改的任何区域内查找更改。界面如下：

interface DoCheck {
    ngDoCheck(): void; 
}

取决于组件树的大小和复杂性，ngDoCheck方法将执行大量次，可能会成为性能瓶颈实现代码。除非必要，否则请避免使用ngDoCheck方法。

当使用对象类型的属性时，Angular将按值引用来观察更改，这意味着它会检测整个值的更改，但不会检测子属性中的更改。在这种情况下，我们将使用DoCheck生命周期钩子并检测对象中的更改。

ngAfterViewChecked方法代表AfterViewChecked生命周期钩子和接口。它允许您提供由于某种原因而未由Angular处理的自定义更改跟踪。该行为类似于AfterContentChecked挂钩，但适用于视图模板子项而不是投影内容。

interface AfterViewChecked {
    ngAfterViewChecked(): void; 
}

主要是DoCheck用于您的业务逻辑更改，如上所述，在场景中不会检测到角度。 AfterViewChecked用于查看跟踪。

希望有所帮助!!!

Answer 2

存在巨大差异 ：

在每次更改检测运行时，经常会调用 ngDoCheck ，通常应避免使用它来避免性能问题。它将检测任何元素，内容或视图更改行为的更改。

仅在检查视图子项的绑定后才会调用

ngAfterViewChecked （它仅与视图相关）。

Answer 3

这两者都是有角度的lifecycle hooks。这些是来自Angular核心库的接口，可以连接到您的代码以监听组件属性的更改。

这是完整的循环序列

1）ngOnChanges（）

2）ngOnInit（）

3）ngDoCheck（）

4）ngAfterContentInit（）

5）ngAfterContentChecked（）

6）ngAfterViewInit（）

7）ngAfterViewChecked（）

来自官方文档

<强> ngDoCheck

检测并执行Angular无法或不会检测到的更改   自己的。

在每次更改检测运行期间立即调用   ngOnChanges（）和ngOnInit（）。

<强> ngAfterViewChecked（）

在Angular检查组件的视图和子视图后响应/   指令所在的视图。

在ngAfterViewInit和之后的所有内容中调用   ngAfterContentChecked（）。

更多细节： https://blog.angularindepth.com/if-you-think-ngdocheck-means-your-component-is-being-checked-read-this-article-36ce63a3f3e5

Answer 4

需要注意的一个重要区别是，ngDoCheck 生命周期钩子在当前组件内的属性更改及其子组件生效之前触发，而 ngAfterViewChecked 触发 < strong>在发生这些变化之后，因此您可以比较组件属性的先前值和当前值。

Angular 4：ngDoCheck与ngAfterViewChecked之间的差异

4 个答案: