角度2の複数のコンポーネントでrxjs Observablesを使用する方法

Question

マインドマップのような学習アプリケーションでは、すべての要素（行/テキスト）がビューの異なるコンポーネントを介して配置されます。データはデータベースからフェッチされ、ビューにあればObservableArrayに保存されます。 2つの異なる種類の変更があります。1.スクロール、ビューの変更、新しいデータの取得。 2.ユーザはビュー内の要素を変更/追加/削除します（新しいデータは取得されません）。

ObservableArray内の一致するElementに各Componentをサブスクライブするだけで、ObservableArray内のObservableを* ngForで繰り返し読み込み、各Objectを一致するComponentに渡したり、

これまで多くのチュートリアルや例で見たような最初のアプローチを使用していますが、2番目の方法を使用するとユーザーの変更が簡単になり、関連する要素のみが検出されます。

Answer 1

私は最初の方法はまだ優れていると思います。最適化の面では、あなたはこれがあなたの項目は一意のIDを持っていると仮定し*ngFor

<div *ngFor="let item for (items | async); trackBy: item?id"> 
    <item [item]="item"></item> 
</div> 

のtrackBy機能を使用することができます。これにより、各item要素が確実に再描画されなくなります。さらに、項目コンポーネントのchangeDetectionStrategyをOnPushと設定します。したがって、アイテムコンポーネントの変更検出は、入力がitemに変更された場合にのみ発生します。

基本的にitemコンポーネントはアイテムデータのみを表示するダム（プレゼンテーション）コンポーネントである必要があります。