如何检查是否在组件上触发了更改检测

Question

在我的应用程序中，我想设置手动更改检测。为此，我将ChangeDetectionStrategry设置为OnPush，每当组件发生更改时，我都会使用detectChanges手动运行更改检测。

如果我在父组件上将ChangeDetectionStrategy设置为OnPush，根据我的理解，它将仅在父组件上运行一次更改检测，在子组件上只运行一次，即使我没有在子组件上将ChangeDetectionStrategy设置为OnPush。如果父组件有任何更改，我在父组件中运行detectChanges（）。如果子组件有任何变化，我在子组件中运行detectChanges（）。

请建议这是正确的方法吗？还是有更好的方法吗？

其次，有没有办法检查它是否按预期工作，并且没有对特定组件执行更改检测。

Answer 1

如果您想要“手动”更改检测，请使用ChangeDetectorRef.detach()而不是OnPush。如果您的组件（大量）数据频繁变化，您可能希望这样做，因此您希望/需要控制更改检测运行的频率（即，视图更新时）以便用户界面保持响应（即，浏览器不会因为太多的变化检测而陷入困境）。

上述用例很少见，您可能希望使用OnPush来限制更改检测在组件上运行的频率，而不是一直到完全手动更改检测。 @Günter在答案中已经涵盖了OnPush。

  

有没有办法检查它是否按预期工作，并且没有对特定组件执行更改检测

是的，实施ngDoCheck()并在其中加入console.log()。此方法为called whenever change detection runs on your component/directive。

Answer 2

使用ChangeDetectionStrategy.OnPush，当子组件的@Input()值更新时，子组件中会运行更改检测，子组件正在侦听的事件已收到(someEvent)="..."或@HostListener(...)或绑定使用| async管道的观察者发出了一个事件。

要在@Input()更改后运行代码，您可以将输入设置为OnChanges，以便在更新时执行代码。

对于事件，只需在事件处理程序中调用您的代码。

对于observable，您可以应用.map(...)之类的运算符，以便在发出值时执行代码。