Angular2 OnPush变化检测和ngFor

时间:2017-02-06 12:03:18

标签: performance angular angular2-changedetection

我有一个父组件,它使用ngFor显示子组件列表。我注意到随着孩子数量的增加,性能变得非常糟糕,因此我将两者都更改为OnPush更改检测策略。

这有很大的帮助,但是当它减慢时仍然很少有情况,我可以看到由于不必要地为每个孩子执行了变化检测。

一个示例是当子组件内部存在单击事件时 - 即使没有更改输入并且它只是触发动画,由于某种原因,正在为父组件执行更改检测,因此每个子组件都会执行更改检测同样(尽管ngFor背后的模型根本没有变化,而且它的OnPush策略......)。我原以为这种“孤立”事件应该只触发特定子组件中的更改检测而不会传播(我实际上已尝试event.stopPropagation()event.preventDefault()但没有成功。)

所以我想知道两件事:

1)是否有任何方法可以更好地控制事件更改检测实际运行的内容以及是否触发父组件更改检测?

2)在每个子组件(从ng2translate)中使用“translate”管道可能会大大减慢应用程序/更改检测的速度吗?

下面的示例plunkr显示问题所在。基本上,如果我点击ngFor列表中的任何项目,它会为每个孩子而不仅仅是受影响的孩子进行变化检测,我想知道是否有任何方法可以抑制它。

https://plnkr.co/edit/mD8HCbwq0cEwPt7itpCf

1 个答案:

答案 0 :(得分:3)

1)您可以使用ChangeDetectorRef.detach()

https://angular.io/docs/js/latest/api/core/index/ChangeDetectorRef-class.html#!#detach-anchor

  

从变化检测器树中分离变化检测器。

     

在重新连接之前,不会检查分离的变化检测器。

     

这也可以与ChangeDetectorRef结合使用来实现本地变更检测检查。

2)管道(如果它们是纯的,这是默认值)仅在管道值或参数改变时被调用,因此没有性能劣势。