Javascript 如何使用服务在组件之间共享阵列数据？

在Angular2中，使用服务在组件之间共享阵列数据

我设计的这个结构如下。

首先，我像这样初始化selectedObject的服务

selectedObject = totalObject;

constructor(private wordService: WordService) {
     this.words = wordService.selectedWords;
}

然后我在构造函数上初始化组件B的selectedObject，如下所示

selectedObject = totalObject;

constructor(private wordService: WordService) {
     this.words = wordService.selectedWords;
}

首先，组件B正确显示了所有对象！！ 但是，当服务将新数组初始化为selectedObject时，组件B无法显示选定对象

---

---

如果我理解您试图做的事情，那么您正试图通过引用跨两个组件操纵一个对象，将服务作为代理，这样组件a对对象X的更改将在组件B中可见。该服务或多或少只是一个隐藏引用的地方

您将获得更高的稳定性，更易于调试，更易于扩展，您可以这样思考：

• 组件A对对象X（它自身所在的位置）进行更改
• 组件A使用对象X的副本更新服务中的模型（这里有几个人说，它充当一个单例，或者更准确地说，是一个“托管实例”）。模型/服务现在拥有数据，但该数据没有可能意外（或以其他方式）改变它的外部引用
• 必要时，服务会发送一个“脏数据”通知，其中包括组件BCDE…等。他正在倾听。此通知包含新数据（这是“推送”）
• 组件BCDE…等。使用这些数据。它不依赖于其控制关注点之外的引用，也不与该服务紧密耦合
• 任何需要修改其他组件使用的数据的其他组件都使用相同的机制
• 任何其他希望从服务中按需获取数据的组件都可以从该服务的getter获取数据的副本（这是“pull”）

我已经试着去做你正在做的事情（很确定我们都做过）。随着时间的推移，这只是一个麻烦（特别是如果你在混合中加入更多的成分）。使用通知/事件在各个方面都更为直截了当，即使最初设置起来似乎更为复杂。测试更容易，因为您只需使用来自通知/事件（在测试中容易触发）的负载进行测试，而不必设置其他组件并让它修改目标组件中使用的服务/引用

---

但是，整个“关于单身汉的一个参考”的事情只是麻烦

如果我理解您的意图，那么您正试图通过引用跨两个组件操纵一个对象，将服务作为代理，这样组件a对对象X的更改将在组件B中可见。该服务或多或少只是一个隐藏引用的地方

您将获得更高的稳定性，更易于调试，更易于扩展，您可以这样思考：

• 组件A对对象X（它自身所在的位置）进行更改
• 组件A使用对象X的副本更新服务中的模型（这里有几个人说，它充当一个单例，或者更准确地说，是一个“托管实例”）。模型/服务现在拥有数据，但该数据没有可能意外（或以其他方式）改变它的外部引用
• 必要时，服务会发送一个“脏数据”通知，其中包括组件BCDE…等。他正在倾听。此通知包含新数据（这是“推送”）
• 组件BCDE…等。使用这些数据。它不依赖于其控制关注点之外的引用，也不与该服务紧密耦合
• 任何需要修改其他组件使用的数据的其他组件都使用相同的机制
• 任何其他希望从服务中按需获取数据的组件都可以从该服务的getter获取数据的副本（这是“pull”）

我已经试着去做你正在做的事情（很确定我们都做过）。随着时间的推移，这只是一个麻烦（特别是如果你在混合中加入更多的成分）。使用通知/事件在各个方面都更为直截了当，即使最初设置起来似乎更为复杂。测试更容易，因为您只需使用来自通知/事件（在测试中容易触发）的负载进行测试，而不必设置其他组件并让它修改目标组件中使用的服务/引用

---

但是，整个“关于单身汉的一个参考”的事情只是麻烦

您只需创建一个服务并将其用作“单例”服务即可

如果您在应用程序的顶层提供，则整个应用程序中只会使用一个实例：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, OtherComponent ],
  bootstrap: [ App ],
  providers: [ DataService ]
})
export class AppModule {}

---

您只需创建一个服务并将其用作“单例”服务即可

如果您在应用程序的顶层提供，则整个应用程序中只会使用一个实例：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, OtherComponent ],
  bootstrap: [ App ],
  providers: [ DataService ]
})
export class AppModule {}

---

清空数组并推送新项目，或者始终引用wordService.selectedWords，而不是重新创建数组。我会选择第二个选项。@Kasperziemainek谢谢你的评论！我理解第一个选项，但第二个选项中的“始终引用”是什么意思？@Kasperziemainek我使用了第一个选项，但它不起作用。添加代码。使用observable通知其他方有关更改。确保不在

组件a

或

组件B

上提供服务，而是在

@NgModule（）

（或公共父组件）@hyunjillee分配后

this.words=wordService.selectedWords分配给
wordService的新数组。所选单词在
下不可见。单词
不是重新创建数组，而是清空数组并推送新项目，或者始终引用wordService.selectedWords。我会选择第二个选项。@Kasperziemainek谢谢你的评论！我理解第一个选项，但第二个选项中的“始终引用”是什么意思？@Kasperziemainek I