如何在 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组件应该是哑（展示）组件，它只显示项目数据。