4

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

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

4

4 回答 4

3

有很大的不同：

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

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

于 2018-06-06T08:03:59.360 回答
2

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

interface DoCheck {
    ngDoCheck(): void; 
}

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

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

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

interface AfterViewChecked {
    ngAfterViewChecked(): void; 
}

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

希望有帮助！！！

于 2018-06-06T06:16:04.800 回答
0

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

于 2021-04-04T22:34:50.940 回答
0

这两个都是角度生命周期钩子。这些是来自 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

于 2018-06-06T09:28:17.277 回答