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

Question

我有两个组件，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为组件创建了一个自定义服务，这是解决这种情况的好方法吗，还是有更好的方法？

我无法在图像组件中获取userAction值。。请帮我解决这个

Answer 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);

类似地，在您的图像组件中，订阅这个可观察到的值，并使用以下代码获得更新的值。

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

希望这能有所帮助。