Angular2 OnPush変化検出とngFor

Question

私はngForを使用して子コンポーネントのリストを表示する親コンポーネントを持っています。私は、パフォーマンスが実際には子供の数が増えるにつれて悪くなることに気付いたので、私は両方ともOnPush変更検出戦略に変更しました。

多くの助けになりましたが、速度が低下するシナリオはまだ少なく、子供のそれぞれに対して変更検出が実行されていることが分かります。

例は、入力が変更されず、単にアニメーションがトリガされても、何らかの理由で親コンポーネントに対して変更検出が実行されているため、各子の結果としてクリックイベントが子コンポーネント内に存在する場合です（たとえngForのモデルが全く変わっておらず、そのOnPushという戦略も...）。私は、このような「隔離された」イベントは、その特定の子コンポーネントの変更検出を引き起こし、伝播しないようにする必要があると考えていたでしょう（実際にはevent.stopPropagation()とevent.preventDefault()は成功しませんでした）。

1）検出が実際に実行され、それは同様の親成分変更detecionをトリガーするかどうかを変更何のイベントのためのより多くの制御を持っていることのいずれかの方法がある：

は、だから私は二つのことを思っていましたか？

2） "translate"パイプを使用して、各子コンポーネント（ng2translateから）で多くのアプリケーション/変更検出が遅くなる可能性がありますか？

問題点を示すために、以下のサンプルを以下に示します。基本的に、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）パイプ（値が純粋な場合はデフォルト）は、パイプされた値またはパラメータが変更されたときにのみ呼び出されるため、パフォーマンス上の欠点はありません。