【问题标题】:How to check if Change Detection was triggered on a component如何检查是否在组件上触发了更改检测
【发布时间】:2017-02-02 19:50:33
【问题描述】:

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

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

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

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

【问题讨论】:

    标签: angular angular2-template angular2-directives angular2-changedetection


    【解决方案1】:

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

    要在 @Input() 更改时运行代码,您可以将输入设为 setter 或实现 OnChanges 以在更新时执行代码。

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

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

    【讨论】:

    • 感谢 Günter 提供的信息,您能否也评论一下我的第一个问题,即我的问题中的第 2 段,这是仪式方式吗?
    • 其实我想我已经回答过了,至少是含蓄的。当@Input() 发生更改时,将调用子项中的更改检测。因此,如果父级更改绑定到子级输入的属性,则会调用子级的更改检测。
    • 如果更改发生在父级中,但不会修改子级的输入,Angular 不会对该组件运行更改检测,对吗? (我在孩子上使用 ChangeDetectionStrategy.OnPush)。
    【解决方案2】:

    如果您想要“手动”更改检测,请使用ChangeDetectorRef.detach() 而不是OnPush。如果您有一个包含(大量)数据的组件非常频繁地更改,则您可能希望执行此操作,因此您希望/需要控制更改检测运行的频率(即,何时更新视图)以便用户界面保持响应(即,浏览器不会因过多的更改检测而陷入困境)。

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

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

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

    【讨论】:

    • 太棒了!我以某种方式忘记了 ngDoCheck() :p
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-08-22
    • 2016-07-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-31
    • 2014-04-01
    相关资源
    最近更新 更多