Angular 2，如何使用服务在组件之间共享数组数据？

Question

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

我将这种结构设计如下。

object structure
{
    data: 'data'
    keys: ['key1', 'key2', ... , 'keyN']
}

* Service has a array of total objects.
totalObject = [object1, object2, ... , objectN]

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

selectedObject = totalObject;

然后，我像这样在构造函数上初始化了组件B的selectedObject。

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

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

---

 // It's not working...
 // remove
this.selectedWords.splice(0, this.selectedWords.length);

// add
for(let i in WORDS) {
  if(WORDS[i].keys.indexOf(key) >= 0) {
    this.selectedWords.push(WORDS[i]);
  }
}

Answer 1

如果我了解您要执行的操作，那么您将尝试通过两个组件之间的引用来操纵对象，并使用一种服务作为代理，以使组件A对对象X的更改在组件B中可见该服务或多或少只是存储引用的地方。

您将获得更多的稳定性，使其更易于调试，并使其更具可扩展性，请考虑以下方式：

• 组件A更改了对象X（它自己容纳）。
• 组件A用对象X的副本更新服务中的模型（这里有人说这是一个单例，或更严格地说，是一个“托管实例”）。模型/服务现在具有数据，但是该数据没有可以意外（或其他方式）对其进行突变的外部参考。
• 必要时，Service会分派BCDE ... etc等组件发送“脏数据”通知。 在听。 该通知包含新数据（这是“推送”）。
• 组件BCDE ...等 使用该数据。 它不依赖于其控制范围之外的参考，也不与该服务紧密耦合。
• 任何其他需要修改其他组件使用的数据的组件，都使用相同的机制。
• 任何其他想要从服务中按需获取数据的组件，都可以从该服务的吸气剂中获取数据的副本（这是“拉”）。

我已尝试做您正在做的事情（很确定我们都有）。 随着时间的流逝，这只是麻烦（特别是如果您将更多组件添加到组合中）。 即使开始时看起来似乎比较复杂，但使用通知/事件更容易处理。 由于您只需使用通知/事件中的有效负载进行测试（在测试中轻松触发），因此测试变得更加容易，您无需设置其他组件，也无需让它修改目标组件中使用的服务/引用。

但是，是的，整个“每个人都在看一个单例的参考”只是麻烦。

Answer 2

您可以简单地创建一个服务并将其用作“单个”服务。

@Injectable()
export class DataService {

  public selectedWords:string[] = [];
}

然后在应用程序的顶层提供它，这样，整个应用程序将只使用一个实例：

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

Plunkr示例