Angular 2 变化检测器

Question

我试图了解 Angular 2 应用程序中的变更检测器机制。我想我在阅读几篇文章时取得了一些进步 :) 但不是很多。据我了解，情况是这样的:

当组件未使用 OnPush 策略时，它将在以下情况下运行关联的更改检测器:

1) 应用程序的任何部分启动 DOM 事件2) 应用程序的任何部分解析 HTTP 请求3) 任何部分使用 setTimeout 或 setInterval 执行异步代码

所有组件都将在组件树中从上到下检查。

当组件使用 OnPush 策略时，它将在以下情况下运行变化检测器:

1) 它的任何@Input 都改变了它的引用(这里涉及不可变性)2)组件(或 child )发起一个事件3) Observable 发起一个事件。在这种情况下，如果我们使用 Observable 作为 @Input，那么我们必须在变化检测器中调用 markForCheck() 方法。

OnPush 组件将其所有组件子树标记为不运行更改检测。

变更检测总是从根组件开始，然后从上到下遍历组件树。

因此，我构建了一个示例应用程序(链接在文末)，其中包含 3 个级别(父级、子级和孙级)的组件树。二级组件是 OnPush 组件。所有组件都附加了单击事件，因此当单击其中任何一个时，都会执行更改检测器。当执行 ngAfterViewChecked Hook 时，我将组件颜色更改为红色几秒钟。

我不明白的是，为什么当我点击孙子组件时，所有的子变化检测器都在运行。我以为只有在从父到孙子的子树中单击的那个才会被执行。

当我点击父级时是一样的。所有子检测器都被执行。为什么？？

哪位好心人能给我解释一下这是怎么回事？

谢谢!!

Github project

Github pages deployed project

Answer 1

我觉得您对变化检测的理解是正确的。我想强调可能有 2 个误解，它们可能会帮助您解决这个难题。

1- ngAfterViewChecked 与是否检测到更改无关，文档[1] 说“请注意 Angular 经常调用 AfterViewChecked，通常是在没有感兴趣的更改时。编写精益钩子(Hook)方法以避免性能问题。”在一个例子之后。

您可能想改用 ngOnChanges()[2]。文档在那里说“Angular 仅在输入属性的值发生变化时调用 Hook ”

2- 当从组件内部更改组件状态时(setTimeout、触发 rx 订阅、...)，您需要注入(inject) ChangeDetectorRef 并调用 ChangeDetectorRef.markForCheck() [3].

这是因为OnPush 只考虑变化的@Input。 ngOnChanges() 不会被触发，因为不会更改任何输入。

[1] https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#aftercontent

[2] https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

[3] https://angular.io/docs/ts/latest/api/core/index/ChangeDetectorRef-class.html