Question

我做了plunker涉及这个问题。

我打算通过角度服务将数据从一个组件传递到其他组件。这些组件不一定具有父子关系。示例花卉数据最初存储在and()。

中

说，在组件A中，我有

DataService

尝试操纵changeName(tInput.value)中的数据，代码为：

DataService

而在组件B中，字符串变量

changeName(name: string) { this.dataService.aFlower["name"] = name; console.log(`Name changed to ${ name }.`) }

获取从objName: string = this.dataService.aFlower.name传递的数据和属性绑定

DataService

在模板中显示数据。

我也有

<h2 [innerHTML]="objName">h2 placeholder</h2>

直接从服务

获取数据

问题是，当我输入新名称并在组件A中运行<h2 [innerHTML]="dataService.aFlower.name">h2 placeholder</h2>时，组件B中的名称不会更改。changeName("a new name")标签显示原始名称。

通过调试工具，我发现从h2取回的数据没有改变。

为什么会这样，我该怎么办？

Answer 1

您正在 parent 和 child 中注入不同的服务实例。

您必须确保它们共享一个服务实例 。

请从两个组件的 providers: [DataService] 装饰器中删除 @Component ，然后将其添加到 @NgModule < / strong> decoarator如下图所示，

@NgModule({ imports: [ BrowserModule ], declarations: [ AppParent, AppChild ], bootstrap: [ AppParent ], providers: [DataService] //<<<-----here })

Answer 2

您需要在模块级别声明服务提供者，因此它将对所有子组件都是单一的，并从每个组件中删除声明。 Fixed plnkr

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppParent, AppChild ],
  bootstrap: [ AppParent ],
  providers: [DataService]
})

角度2操纵服务中的数据不会改变第二个组件中的数据

2 个答案: