Javascript 通过单一服务向Angular2中的多个不相关组件广播数据

我有两个不相关的组件，它们使用一个@injectable服务

当调用特定的服务方法时。它发出均匀的光。第二个组件订阅了该事件

我的代码如下：

组件2：

import { Component, OnInit, NgZone, EventEmitter} from '@angular/core';
import { SpeechEngine} from '../../services/common/Speechengine';

@Component({
  selector: 'bot2',
  template: '<h3>bot2</h3> <input type="button" value="Emmit" (click)="testEmmiter()"/>',
  providers: [],

 })
 export class Bot2 {
   _speechEngine: any
   constructor(private zone: NgZone) {
    this._speechEngine = new SpeechEngine(this.zone);
    this._speechEngine.BotActivation$.subscribe(obj => { this.AutoBotActivation(obj.speechActive) })
 }
 testEmmiter() {
    this._speechEngine.testEmiter();
 }
 AutoBotActivation(speechActive) {
    alert(" Bot2 subscribed function called.")
 }
}

@Component({
  selector: 'bot3',
  template: '<h3>bot3</h3> <input type="button" value="Emmit" (click)="testEmmiter()"/>',
  providers: [],

})
export class Bot3 {
   _speechEngine: any
   constructor(private zone: NgZone) {
     this._speechEngine = new SpeechEngine(this.zone);
     this._speechEngine.BotActivation$.subscribe(obj => { this.AutoBotActivation(obj.speechActive) })
 }
 testEmmiter() {
    this._speechEngine.testEmiter();
 }
 AutoBotActivation(speechActive) {
    alert(" Bot3 subscribed function called.")
 }
}

从'@angular/core'导入{Component，OnInit，NgZone，EventEmitter}；
从“../../services/common/SpeechEngine”导入{SpeechEngine}；
@组成部分({
选择器：“bot2”，
模板：“bot2”，
提供者：[]，
})
导出类Bot2{
_演讲引擎：有吗
建造商（专用区：NgZone）{
this._speechEngine=新speechEngine（this.zone）；
this._speechEngine.BotActivation$.subscribe（obj=>{this.AutoBotActivation（obj.speechActive）}）
}
测试器（）{
这个._speechEngine.testimiter（）；
}
自动旋转激活（speechActive）{
警报（“调用了Bot2订阅函数”）
}
}
@组成部分({
选择器：“bot3”，
模板：“bot3”，
提供者：[]，
})
出口级Bot3{
_演讲引擎：有吗
建造商（专用区：NgZone）{
this._speechEngine=新speechEngine（this.zone）；
this._speechEngine.BotActivation$.subscribe（obj=>{this.AutoBotActivation（obj.speechActive）}）
}
测试器（）{
这个._speechEngine.testimiter（）；
}
自动旋转激活（speechActive）{
警报（“已调用Bot3订阅函数”）
}
}

服务：

@Injectable()
export class SpeechEngine{
  BotActivation$: EventEmitter<any> = new EventEmitter<any>()    
  constructor(private zone: NgZone) {  }
  testEmiter() {
    this.BotActivation$.next({
        speechActive: false
    });
  }

}   

@Injectable（）
出口级语音引擎{
BotActivation$：EventEmitter=新的EventEmitter（）
构造函数（专用区域：NgZone）{}
测试员（）{
这是.BotActivation$.next({
发言：错误
});
}
}   

我的服务是在appModule提供程序中添加的。 提供者：[SpeechEngine]

问题是，当我从bot2调用TesteMimiter（）时，服务会发出函数，而bot2中的订阅会捕获它。但是bot3并没有引起注意。用bot3发出相反的声音

---

如果我错误地使用了发射器，有人能建议如何获得此功能吗。我的组件不存在任何（父/子）关系。一方可以是另一方的祖父母的兄弟姐妹

首先创建一个全局发布-订阅服务

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

@Injectable()
export class PubSubService {
  emitter: EventEmitter<any> = new EventEmitter();

  constructor( ) { }

  subscribe(callback) {
    return this.emitter.subscribe(callback);
  }

  publish(event, data?) {
    let payload = {
      type: event,
      data: data
    };
    this.emitter.emit(payload);
  }

}

从服务/组件发布事件

constructor( private pubSubService: PubSubService) { }

ngOnInit() {
  this.pubSubService.subscribe(event => {
    if (event.type === 'event_1') {
      // do something
    } else if (event.type === 'event_2') {
      // do something
    }
  });
}

this.pubSubService.publish('event_1', "what ever message");

---

首先创建一个全局发布-订阅服务

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

@Injectable()
export class PubSubService {
  emitter: EventEmitter<any> = new EventEmitter();

  constructor( ) { }

  subscribe(callback) {
    return this.emitter.subscribe(callback);
  }

  publish(event, data?) {
    let payload = {
      type: event,
      data: data
    };
    this.emitter.emit(payload);
  }

}

从服务/组件发布事件

constructor( private pubSubService: PubSubService) { }

ngOnInit() {
  this.pubSubService.subscribe(event => {
    if (event.type === 'event_1') {
      // do something
    } else if (event.type === 'event_2') {
      // do something
    }
  });
}

this.pubSubService.publish('event_1', "what ever message");

---

我希望在整个应用程序中使用此服务的单个实例。甚至在子模块（功能模块）下的组件中。因此，当我的PubSubService发出一个事件时，我的应用程序中的所有组件（已订阅此事件）都可以获得广播消息。上面的代码将实现这一技巧，在app.module级别注入PubSubService，所有组件/服务都将是单实例和静态的。我希望在整个应用程序中使用此服务的单个实例。甚至在子模块（功能模块）下的组件中。因此，当我的PubSubService发出一个事件时，我的应用程序中的所有组件（已订阅此事件）都可以获得广播消息。上面的代码将完成此操作，在app.module级别注入PubSubService，对于所有组件/服务，它将是单态和静态的。