首页 文章

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

提问于
浏览
5

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

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

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

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

2 回答

  • 6

    使用 ChangeDetectionStrategy.OnPush ,当更新子组件的 @Input() s值时,子组件中将运行更改检测,子组件正在侦听的事件已收到 (someEvent)="..."@HostListener(...) 或绑定到使用 | async 管道发出事件的observable .

    要在更改 @Input() 时运行代码,可以使输入成为setter或实现 OnChanges ,以便在更新时执行代码 .

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

    对于observable,您可以应用像 .map(...) 这样的运算符,以便在发出值时执行代码 .

  • 5

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

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

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

    是的,实现 ngDoCheck() 并将 console.log() 放入其中 . 这个方法是called whenever change detection runs on your component/directive .

相关问题