Question

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

我设计了这样的结构，如下所示。

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

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

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

selectedObject = totalObject;

然后我在构造函数上初始化了Component 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

您只需创建一项服务并将其用作“单身”服务即可。

@Injectable()
export class DataService {

  public selectedWords:string[] = [];
}

并且您在应用程序的顶层提供它，这样只会在您的应用程序中使用一个实例：

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

Plunkr example

Answer 2

如果我理解你正在尝试做什么，那么你试图通过引用来操纵一个对象跨两个组件，一个服务作为一种代理，这样组件A到对象X的更改将会在组件B中可见。服务或多或少只是一个存储引用的地方。

通过这种方式，您将获得更高的稳定性，使其更容易调试，并使其更具可扩展性：

组件A更改为对象X（它自己居住）。
组件A更新服务中的模型（这里有几个人说，作为单例，或技术上更正确，管理实例＆＃34;），带有对象X的副本。模型/服务现在有数据，但该数据没有可能意外（或以其他方式）改变它的外部引用。
必要时，服务部门会发送一个“脏数据”＆＃34;通知，组件BCDE ......等。在听。此通知包含新数据（这是＆＃34; push＆＃34;）。
组件BCDE ......等。使用那些数据。它不依赖于它的控制关注之外的引用，并且它没有与该服务紧密耦合。
需要修改其他组件使用的数据的任何其他组件只使用相同的机制。
任何其他想要从服务中获取数据的组件，都可以从该服务的getter中获取它的副本（这是＆＃34; pull＆＃34;）。

我试图做你正在做的事情（很确定我们都有）。随着时间的推移，它只是麻烦（特别是如果你把更多的组件扔进混合中）。即使初始设置看起来更复杂，使用通知/事件也更加明确。它更容易测试，因为您只是使用通知/事件中的有效负载进行测试（在测试中很容易触发），您不必设置其他组件并让它修改所使用的服务/参考在目标组件中。

但是，是的，整个＆＃34;一个单身人士的参考一切都在看＆＃34;事情只是麻烦。

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

2 个答案: