如何在 Angular 2 的多個組件中使用 rxjs Observables

Question

對於類似思維導圖的學習應用程序，所有元素（行/文本）都通過視圖中的不同組件放置。 如果數據在視圖中，則從數據庫中獲取數據並保存在 ObservableArray 中。 有兩種截然不同的變化： 1. 滾動，視圖發生變化並獲取新數據； 2. 用戶更改/添加/刪除視圖中的元素（不獲取新數據）。

將可觀察對象“讀取”到 ObjectArray 是否更好，使用 *ngFor 對其進行迭代，將每個對象傳遞給匹配的組件，或者只傳遞一個 id 數組並讓每個組件訂閱 ObservableArray 中的匹配元素？

到目前為止，我正在使用我在許多教程和示例中看到的第一種方法，但使用第二種方法會使用戶更改更容易，並且只會檢測到相關元素的更改。

Answer 1

我認為第一種方式仍然更好。 在優化方面，您可以使用*ngFor trackBy功能

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

這假設您的項目具有唯一 ID。 這將確保不會再次呈現每個item元素。 另外將 item 組件的changeDetectionStrategy設置為OnPush 。 因此，僅當輸入（即item更改時才會觸發項目組件更改檢測。

基本上item組件應該是啞（展示）組件，它只顯示項目數據。