Angular 4：ngDoCheck 与 ngAfterViewChecked 之间的区别答案

【问题标题】：Angular 4 : Difference between ngDoCheck vs ngAfterViewCheckedAngular 4：ngDoCheck 与 ngAfterViewChecked 之间的区别
【发布时间】：2018-11-15 13:00:36
【问题描述】：

在 Angular 2+ 中，ngDoCheck 和 ngAfterViewChecked 似乎执行相同的功能。每当触发更改检测时，就会调用ngDoCheck。现在这个变化检测将随着 View 的变化而触发。根据文档，每当视图更改时都会调用 ngAfterViewChecked。

如果一个就足够了，这里需要两个生命周期钩子吗？

【问题讨论】：

一个用于任何更改，一个用于视图更改完成更改检测

标签： angular lifecycle-hook

【解决方案1】：

需要注意的一个重要区别是ngDoCheck生命周期钩子触发之前当前组件中的属性更改并且它的子组件已经生效，而ngAfterViewChecked触发之后已经发生了这些变化，因此您可以比较组件属性的先前值和当前值。

【讨论】：

【解决方案2】：

这两个都是有角度的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()。

【讨论】：

【解决方案3】：

差别很大：

ngDoCheck 在每次更改检测运行时被非常频繁地调用，您通常应该避免使用它以避免出现性能问题。它将检测任何元素、内容或视图更改行为的更改。

ngAfterViewChecked 仅在检查子视图的绑定后调用（它仅与视图相关）。

【讨论】：

【解决方案4】：

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

interface DoCheck {
    ngDoCheck(): void; 
}

根据组件树的大小和复杂性，ngDoCheck 方法会执行大量次数，如果您实施不当，可能会成为性能瓶颈代码。除非必要，否则避免使用ngDoCheck 方法。

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

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

interface AfterViewChecked {
    ngAfterViewChecked(): void; 
}

DoCheck 主要用于您的业务逻辑更改，在上述场景中角度无法检测到这些更改。 AfterViewChecked 用于查看跟踪。

希望对你有帮助！！！

【讨论】：