synchronization - Angular2，保持模型在组件之间同步

Question

我正在考虑从我信任的 Backbone 转移到 Angular2(或者我应该说，我的老板想玩一个新玩具，这对我来说很好)，我在网上搜索了很多并做了一些测试，但我不能'似乎找不到这个简单问题的答案:

我能否在两个组件之间保持 2 个模型同步？示例:我在侧边栏上有一个用户列表，这是一个组件，还有一个用于在我的“主页”中编辑所述用户的表单，这是另一个组件。

侧边栏负责获取其集合以显示，表单负责获取其模型。当模型更新时，我希望更改反射(reflect)在侧边栏中，而无需再次通过服务器。

我知道 SpinJS 会这样做，并且我使用事件在 Backbone 中破解了一些东西来实现同样的事情(基于模型类和 id)，但我想知道 Angular2 是否有处理它的 native 方式？如果不是，人们将如何实现这种行为？

谢谢。

编辑:

我在这个 Plunker 中添加了我的测试文件:http://plnkr.co/edit/jIdnu68ZDMDSFJkomN3Y

首先，选择一个英雄，然后点击“查看详情”，这将向内存服务器发出一个http.get请求以获取英雄。

其次，点击“给剑”，这将为选定的用户添加一把武器。出于测试目的，我没有使用已经加载的用户，而是再次使用 http.get 请求相同的用户。

当我更改文本框中的名称时，第二个实例的名称不会更新。

你要想象一下，无论出于什么原因，我不能使用当前的英雄实例，我想从服务器重新请求它。

Answer 1

您可以在组件之间共享服务。

@Injectable()
export class SharedService {
  someField:string;
}

@Component({selector: 'parent-cmp', providers [SharedService], ...)
export class ParentCmp {
  constructor(private model:SharedServicee) {
  }
}

@Component({selector: 'child-cmp', 
   // don't add it to providers here so it gets the same instance 
   // the parent got
   /*providers [SharedService] */, ...)
export class ChildCmp {
  constructor(private model:SharedServicee) {
  }
}

当一个组件更改服务中的字段时，其他服务在另一个组件中也是可见的。

您可以使用 Observable 或 EventEmitter 通知感兴趣的各方有关更改或其他事件。