在angular2中使用事件发射器在组件之间共享变量？答案

【问题标题】：share variable between components using event emitter in angular2?在angular2中使用事件发射器在组件之间共享变量？
【发布时间】：2017-06-25 14:59:49
【问题描述】：

我有 2 个组件，个人资料和图像（都有不同的路线）。我想从 Image 组件的 Profile 中访问一个变量。

我在 BusinessList 组件中有一个按钮，当用户单击该按钮时，它应该重定向到主页，我在其中将一项添加到本地存储。

在主页个人资料中，图像和联系人位于不同的选项卡中。

在BusinessList中单击按钮后，配置文件选项卡被激活。在这里，我获取本地存储项，将其存储一个变量 - 我想从图像访问它的同一个变量，联系人 --- 选项卡

这是我的个人资料组件

import { Component, OnInit} from '@angular/core';

@Component({
  moduleId: 'module.id',
  selector: 'my-profile',
  templateUrl: '../views/business.images.html',
})


export class BusinessProfileComponent {
  public userAction: any;


  constructor(private router: Router, activeroute: ActivatedRoute,
              BusinessSettingService: BusinessSettingService) {


    this.userAction = localStorage.getItem("action")
    BusinessSettingService.userTakenAction.next(this.userAction);

    console.log(this.userAction, '  this.userAction')
  }

}

这里的userAction是组件间可共享的数据，

图像组件

import { Component, OnInit} from '@angular/core';

@Component({
  moduleId: 'module.id',
  selector: 'my-core',
  templateUrl: '../views/business.images.html',
})

export class BusinessImagesComponent{

 constructor( private router: Router, BusinessSettingService: BusinessSettingService) {

    BusinessSettingService.userTakenAction.subscribe(value => {this.userImageaction= !value;})
}

业务设置服务

import { Injectable,Output,EventEmitter  }     from '@angular/core';

@Injectable()
export class BusinessSettingService {

  public userTakenAction: EventEmitter<string> = new EventEmitter<string>();
}

我使用EventEmitter为组件创建了一个自定义服务，这是解决这种情况的好方法，还是有更好的方法来解决这个问题？

我无法在 Image 组件中获取 userAction 值。请帮我解决这个问题

【问题讨论】：

个人资料和图像组件是否出现在不同的页面上（通过不同的路线）？还是它们作为组件出现在同一页面上？
是的，不同的页面（通过不同的路线）
好的，所以您希望一个组件在发生某些事情时通知另一个组件？并发送一些数据？
是的，我想在图像组件中获取数据表单配置文件
如果两个组件都在同一个父页面上，那么您可以使用shared service 或文档中列出的其他方法在两个组件之间进行通信。

标签： angular angular2-routing angular2-services angular2-directives

【解决方案1】：

将您的 BusinessSettingService 更新为以下一项：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class BusinessSettingService { 

// Observable  for selection source
  private userActionSource = new Subject<any>();

// Observable for selection stream
  userActionStream$ = this.userActionSource.asObservable();

userActionUpdated(userAction: any) {
    console.log('user action is: ' + userAction);
    this.userActionSource.next(userAction);
  }

}

现在，在 Profile 和 Image 组件中，在构造函数中启动您的 BusinessSettingService 并简单地订阅此观察者并更新值。

在组件构造函数中：

constructor (private businessSettingService: BusinessSettingService) {}

然后订阅它并更新值：

this.businessSettingService.userActionUpdated(this.userAction);

同样，在您的 Image 组件中，订阅此 observable 并使用以下代码获取更新后的值。

  this.businessSettingService.userActionStream$.subscribe(
   value => {
       this.userAction = value;
   }
);

希望这会有所帮助。

【讨论】：