如何在Angular2中的组件之间共享数据[重复]

Posted

技术标签:

【中文标题】如何在Angular2中的组件之间共享数据[重复]【英文标题】:How to Share Data between Components in Angular2 [duplicate] 【发布时间】:2018-01-30 21:12:04 【问题描述】:

在这个场景中,我有 3 个组件,即组件 1、组件 2、组件 3。 Component-2 和 Component-3 托管在 Component-1 中 我想在单击组件 2 中的按钮后将数据发送到组件 3。 提前致谢

【问题讨论】:

我已添加图片供参考 您可以在 Angular 2 中使用 @Input@Output 在组件之间进行通信。 使用 Rxjs 主题,行为主题是您场景的最佳解决方案。 【参考方案1】:

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

服务

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

组件 1(打字稿)

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

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

组件 2(打字稿)

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

组件 2 (html)

 <h1> ms.someVariable </h1>  <---- Will print Hello! in your HTML markup

【讨论】:

【参考方案2】:

您可以使用 Angular 2/4 中可用的 @Input 和 @Output 装饰器方法来实现这一点。

这些使用起来非常简单。只需将共享数据保留在组件 1 中,然后将该数据与组件 2 和 3 进行双向绑定。确保在组件 2 或 3 中的任何一个数据发生更改时触发更改事件。

//for example component 1
@Component( ... )

export class Component1
  private data: Data = "some data";


//component 2 and 3
@Component( ... )

export class Component2

  @Input() data: Data = "some data";
  @Output() dataChange: EventEmitter ...
  
  ngOnChanges()
    this.dataChange.emit(this.data);
  
<component1>
<component2 [(data)]="data"></component2>
<component3 [(data)]="data"></component3>
</component1>

【讨论】:

以上是关于如何在Angular2中的组件之间共享数据[重复]的主要内容,如果未能解决你的问题,请参考以下文章

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

angular2 - 在组件之间传递数据对象

如何在多个 Angular 2 项目之间共享一个 Angular 2 组件?

使用 Typescript 在 Angular 2 中的组件之间共享行为

如果组件不是Angular2中的父子组件,如何在组件之间传递数据?

Angular 2 Dart:如何在父组件与路由器和子组件之间共享变量?