각도 2의 여러 구성 요소에서 rxjs Observables를 사용하는 방법

Question

mindmap과 유사한 학습 응용 프로그램의 경우 모든 요소 (선/텍스트)가 다른 구성 요소를 통해 배치됩니다. 데이터는 데이터베이스에서 가져 와서 뷰에있는 경우 ObservableArray에 저장됩니다. 두 가지 종류의 변경이 있습니다. 1. 스크롤링,보기 변경 및 새 데이터 가져 오기. 2. 사용자가 뷰에서 요소를 변경/추가/삭제합니다 (새 데이터는 반입되지 않음).

ObservableArray 내에서 일치하는 요소를 구독하는 각 구성 요소를 구독하고 해당 구성 요소에 ID 배열을 전달하는 * ObservableArray를 사용하여 Observable을 반복하여 * ngFor와 함께 반복하는 것이 더 낫습니까?

지금까지 많은 튜토리얼과 예제에서 본 첫 번째 접근 방법을 사용하고 있지만 두 번째 방법을 사용하면 사용자가 훨씬 쉽게 변경되고 관련 요소 만 변경 감지됩니다.

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 구성 요소는 항목 데이터 만 표시하는 벙어리 (프레젠테이션) 구성 요소 여야합니다.