Javascript 如何在Angular2中的组件之间共享数据

在这个场景中，我有3个组件，即组件1、组件2和组件3。 组件2和组件3位于组件1中 我想在点击组件2中的按钮后将数据发送到组件3。

---

提前感谢

您可以使用Angular 2/4中提供的@Input和@Output decorator方法来实现这一点

这些都是非常简单的使用。只需将共享数据保留在组件1中，并将该数据与组件2和3进行双向绑定。确保在组件2或组件3的数据发生更改时触发更改事件

//例如组件1
@组件（{…}）
导出类组件1{
私有数据：data=“某些数据”；
}
//构成部分2和3
@组件（{…}）
导出类组件2{
@输入（）数据：data=“一些数据”；
@Output（）数据更改：EventEmitter。。。
ngOnChanges（）{
this.dataChange.emit（this.data）；
}
}

---

使用服务在组件之间共享数据

服务

 export class MyService {
     public someVariable: string = ""
     // .....
 }

组件1（类型脚本）

组件2（打字脚本）

组件2（HTML）

---

{{ms.someVar}}我添加了图像以供参考。您可以在Angular 2中使用
@Input
和
@Output
在组件之间进行通信。使用Rxjs主题，行为主题是您场景的最佳解决方案。
 import { MyService } from "./myService.service"
 // ......
 constructor(public ms: MyService) {}

 setValue(val){
     this.ms.someVariable = "Hello!" // Alter the variable in the service
 }

 import { MyService } from "./myService.service"
 // ......
 constructor(public ms: MyService) {}

 <h1>{{ ms.someVar }}</h1>  <---- Will print Hello! in your HTML markup