角度2の観測可能なサブオブジェクト

Question

Observables/Subjects of Angular2についての私の理解を助けたいと思っています。私は、次の形式のいくつかのデータを表示しようとしているアプリを持っている：

'data view component' 
    | 
    --> 'section component' 
     | 
     --> 'data item component' 

のデータ：

sections = [ 
    { 
     _id: '999' 
     name: 'section 1' 
     items: [ 
      { 
       name: "item 1.1" 
       property1: "value 1.1.1" 
       property2: "value 1.1.2" 
       property3: "value 1.1.3" 
      } 
      { 
       name: "item 1.2" 
       property1: "value 1.2.1" 
       property2: "value 1.2.2" 
       property3: "value 1.2.3" 
      } 
     ] 
    }, 
    { 
     _id: '888' 
     name: 'section 2' 
     items: [ 
      { 
       name: "item 2.1" 
       property1: "value 2.1.1" 
       property2: "value 2.1.2" 
       property3: "value 2.1.3" 
      } 
      { 
       name: "item 2.2" 
       property1: "value 2.2.1" 
       property2: "value 2.2.2" 
       property3: "value 2.2.3" 
      } 
     ] 
    } 
    . 
    . 
    . 
] 

。これを行うには、私はこのようになりますコンポーネントツリーを設定していますビューコンポーネント」は、そう状部コンポーネントに渡される観察呼ばsectionDataの$、としてセクションのリストを保持：

<section-component 
    *ngFor="let section of sectionData$ | async" 
></section-component> 

『セクション成分は、データ項目部品『』ホスト』とデータでありますそのように渡された：

<data-item-component 
    *ngFor="let item of section.items" 
></data-item-component> 

変更が発生したとき、すなわちsectionData $ .next（）コンポーネント全体のツリーが更新される...変更は項目だけの1または2で発生したとしても、呼び出されました特定のセクション内でこれは、画面上にレンダリングされるデータの複雑さとサイズによって、非常に遅くなる可能性があります。

親観測値のそれぞれのサブオブジェクトが変更された場合にのみ、コンポーネントを更新できますか？

Answer 1

customTrackBy機能がで蹴るところです、あなたのセクションのIDが一意であることを確認することができます場合は、そのIDによってアイテムを追跡するために角度言う：。、あなたのdata view component内部

<section-component *ngFor="let section of sectionData$ | async;trackBy:customTrackBy"></section-component> 

とをcustomTrackBy機能を追加：

customTrackBy(index, sec) { 
    return sec._id; 
} 

同じ考えがアイテムにも適用できます。

Plnkr：http://plnkr.co/edit/mG2kYiInXIYsrmRqgajS?p=preview

Answer 2

私はComponenetメタデータプロパティ "changeDetection" を活用します。これにより、何も変更されていなければ、Angular 2はコンポーネントからの変更の送信をスキップします。 Observableを使用しているため、ChangeDetectorRefオブジェクトも活用する必要があります。したがって、サブクライブメソッドからデータを受け取ったときに、コンポーネントで何かが変更されたことをAngular 2に伝えることができます。詳細はhereです。