同步 – Angular2,保持模型在组件之间同步

发布时间：2020-12-17 07:14:33 所属栏目：安全来源：网络整理

导读：我正在考虑从我信任的骨干转移到Angular2(或者我应该说,我的老板想玩一个新的玩具,这对我很好),我在网上搜索了很多并进行了一些测试,但我似乎无法找到这个简单问题的答案：我可以在两个组件之间保持两个模型同步吗？例子：我在侧边栏上有一个用户列表,它是

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

我可以在两个组件之间保持两个模型同步吗？例子：我在侧边栏上有一个用户列表,它是一个组件,还有一个用于在我的“主页面”中编辑所述用户的表单,这是另一个组件.

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

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

谢谢.

编辑：

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

首先,选择一个英雄,然后单击“查看详细信息”,这将向内存服务器发出一个http.get请求以获取Hero.

其次,点击“Give sword”,这将为所选用户添加一个武器.
出于测试目的,我不再使用已经加载的用户,而是再次使用http.get请求相同的用户.

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

您必须想象我无法出于任何原因使用当前的英雄实例,我想再次从服务器请求它.

解决方法

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

@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通知相关方有关更改或其他事件.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!