각도 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" 
      } 
     ] 
    } 
    . 
    . 
    . 
] 

이 작업을 수행하기를, 나는 다음과 같다 구성 요소 트리를 설정 한 섹션 구성 요소는 데이터 항목의 구성 요소 '호스트' '데이터는 다음과 같습니다 뷰 구성 요소는'

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

은과 같이 섹션 구성 요소로 전달되는 관찰라는 sectionData의 $로 섹션의 목록을 보유하고 ' 과 같이 전달 :

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

변화가 발생했을 때, 즉 sectionData $ 다음 내용() 전체 컴포넌트 트리가 업데이트 ... 변화 만 항목 중 하나 또는 두 개의 발생하더라도라고 주어진 섹션 내에서. 화면에 표시 할 데이터의 복잡성과 크기에 따라 상당히 느려질 수 있습니다.

상위 관찰 가능 항목의 해당 하위 개체가 변경 될 때만 구성 요소를 업데이트하려면 어떻게해야합니까?

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 객체를 활용해야하므로 subcribe 메소드에서 데이터를 수신 할 때 Angular 2에 구성 요소가 변경되었음을 알릴 수 있습니다. 자세한 내용은 here을 참조하십시오.