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）管道（如果它們是純的，這是默認值）僅在管道值或參數改變時被調用，因此沒有性能劣勢。