Question

我考虑从我信任的骨干转移到Angular2（或者我应该说，我的老板想玩一个新玩具，这对我很好），我在网上搜索了很多并做了一些测试但是我似乎无法找到这个简单问题的答案：

我可以在两个组件之间保持2个模型同步吗？例子：我在侧边栏上有一个用户列表，它是一个组件，还有一个用于在我的＆＃34;主页＆＃34;中编辑所述用户的表单，这是另一个组件。

侧边栏负责显示其集合，表单负责获取其模型。更新模型后，我希望更改能够反映在侧边栏中，而无需再次通过服务器。

我知道SpinJS会这样做，我在Backbone中使用事件来实现相同的东西（基于模型类和id），但是我想知道Angular2是否有一种原生的处理方式？如果没有，那么如何实施这种行为？

感谢。

编辑：

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

首先，选择一个英雄，然后点击＆＃34;查看详细信息＆＃34;，这将向内存服务器发出http.get请求以获取英雄。

其次，点击＆＃34;给剑＆＃34;，这将为所选用户添加武器。出于测试目的，我不再使用已加载的用户，而是再次使用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通知相关方有关更改或其他事件。

Answer 2

您可以使用共享服务在不同的组件中订阅同一事件。（如果你在bootstrap上提供这个服务，它会在所有组件中提供相同的对象。非常重要！）。

如果您只想呼叫http.get一次，然后只是重播该呼叫，您应该使用：

private _subject = new ReplaySubject(1);
constructor(public http: Http) {
    this.http
        .get("...").subscribe(this._subject);
}

完整，有效的例子： https://plnkr.co/edit/G1mSXfpuYaIGXNwK5WKy?p=preview

看看网络面板（chrome），ajax调用只被触发一次。

Answer 3

我认为最好的方法是在共享服务中利用EventEmitter。更改完成后，将在事件发射器上发出事件。将通知已注册的应用程序的其他部分。

看到这个答案：

Delegation: EventEmitter or Observable in Angular2

Angular2，保持模型在组件

3 个答案: