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

问题描述：

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

我设计了如下结构。

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

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

起初我初始化服务selectedObject这样。

selectedObject = totalObject;

然后，我像这样在构造函数上初始化了Component的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]); 
    } 
}

而不是重新创建阵列，空它，推送新项目或始终引用wordService.selectedWords。我会选择第二个选项。 –

@KasperZiemianek感谢您的评论！我理解第一个选项，但第二个选项中的“始终参考”是什么意思？ –

@KasperZiemianek我用第一个选项，但它不工作。添加代码。 –

答

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

@Injectable() 
export class DataService { 

    public selectedWords:string[] = []; 
}

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

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

Plunkr example

答

如果我明白你做什么，你都试图操纵的对象，通过引用，在两个部件，用服务为不大不小的经纪人，这样的成分变化A到Object X将在组件B中可见。该服务或多或少只是用来存储引用的地方。

您将获得更多的稳定性，使之更容易调试，并使其有更多可扩展的，这样的想法：

A组分，使更改对象X（它设有本身）。
组件A使用Object X的副本更新Service中的模型（这里有几个人称为单身人士，或更技术上正确的“管理实例”）。模型/服务现在拥有数据，但该数据没有外部参考，可能会意外（或以其他方式）改变它。
必要时，服务会发送“脏数据”通知，该组件BCDE等等。正在倾听。此通知包含新数据（这是“推送”）。
组件BCDE ...等。使用这些数据。它不依赖于其控制问题之外的参考，并且不与该服务密切相关。
任何其他需要修改其他组件使用的数据的组件，只是使用相同的机制。
任何其他想要从服务中获取数据的组件，都可以从该服务的获取方获取它的副本（这是“拉”）。

我试图做你在做什么（很确定我们都有）。随着时间的推移，这只是麻烦（特别是如果你把更多的组件投入混音）。使用通知/事件更全面，即使初始设置似乎更复杂。由于您只是使用通知/事件中的有效内容进行测试（容易在测试中触发），因此您无需设置其他组件并使其修改目标组件中使用的服务/参考，因此测试更容易。

但是，是的，整个“一个单身人士参考一切都在看”的东西只是麻烦。

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

相关推荐