Angular 2 事件广播答案

【问题标题】：Angular 2 event broadcastAngular 2 事件广播
【发布时间】：2016-01-25 02:40:15
【问题描述】：

Angular 2 的新手。我正在努力在同级别组件之间广播一个事件。目前我知道 EventEmitter 只是可以将事件传输到上层组件。

我已经检查了这个 this link 并且知道 observable 可能是解决我的问题的一种方法，但该 url 中的示例似乎不适合我。

有谁知道如何将它（可观察）用于广播事件或以其他方式将事件传输到同级组件？

【问题讨论】：

embed.plnkr.co/aJe5SUtFlnpmGXWA5eHk

标签： events broadcast observable angular eventemitter

【解决方案1】：

您只需要创建一些服务来发出您可以订阅的消息。它可以是来自 rxjs 的 Observable、来自 node.js 的 EventEmitter 或 Observable pattern 之后的任何其他内容。然后你应该使用依赖注入将这个服务注入到具体的组件中。见this plunker。

class Broadcaster extends EventEmitter {}

@Component({
  selector: 'comp1',
  template: '<div>Generated number: {{ generatedNumber }}</div>',
})
class Comp1 {
  generatedNumber: number = 0;

  constructor(broadcaster: Broadcaster) {
    setInterval(() => {
      broadcaster.next(this.generatedNumber = Math.random());
    },1000);
  }
}

@Component({
  selector: 'comp2',
  template: '<div>Received number: {{ receivedNumber }}</div>',
})
class Comp2 {
  receivedNumber: number = 0;

  constructor(broadcaster: Broadcaster) {
    broadcaster.observer({
      next: generatedNumber => this.receivedNumber = generatedNumber
    });
  }
}

@Component({
  selector: 'app',
  viewProviders: [Broadcaster],
  directives: [Comp1, Comp2],
  template: `
    <comp1></comp1>
    <comp2></comp2>
  `
})
export class App {}

PS在这个例子中，我使用来自 angular2 的 EventEmitter，但同样，它可以是任何你想要的

【讨论】：

感谢您回复并澄清“可观察模式”的概念。
最新版本的 angular Emitter 已改为使用 observables broadcaster.subscribe(generatedNumber => this.receivedNumber = generatedNumber);
您能否为现代 Angular 2 更新此答案？我想我已经接近了，但我的 component2 没有捕捉到事件，即使在更新为使用订阅之后也是如此。

【解决方案2】：

使用BehaviorSubject

服务：

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

@Injectable()
export class MyService {

   public mySubject: BehaviorSubject<number> = new BehaviorSubject<number>(0);


   public doSomething(): void { 
      let myValue: number = 123;
      this.mySubject.next(myValue);
   }
}

组件：

@Component({ 
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {

   constructor(private myService: MyService) { 
        this.myService.mySubject.subscribe(
             value => {
                console.log(value); 
             }
        );
   }

}

【讨论】：

我使用这种方法来获取 Angular Materials Toolbar 点击事件来打开和关闭 Angular Materials Sidenav 组件 - 干杯