Angular2 OnPush变化检测和ngFor

Question

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

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

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

所以我想知道两件事：

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

2）在每个子组件（从ng2translate）中使用“翻译”管道可能会大大减慢应用程序/更改检测的速度吗？

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

https://plnkr.co/edit/mD8HCbwq0cEwPt7itpCf

Answer 1

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

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

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

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

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

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