Angular 2事件广播

Question

刚接触Angular 2，我正在研究如何在同级组件之间广播事件，但目前我只知道EventEmitter只能将事件传输到上一级组件。

我查看了这个链接，了解到observable可能是解决我的问题的一种方式，但是该url中的示例似乎对我无效。

有谁知道如何使用observable来广播事件或其他将事件传输到同级组件的方法吗？

- Garry

---

http://embed.plnkr.co/aJe5SUtFlnpmGXWA5eHk/ - Difinity

Answer 1

你只需要创建一个服务，它会发出一些消息，你可以订阅这些消息。它可以是来自rxjs的Observable，来自node.js的EventEmitter，或任何遵循观察者模式的其他东西。然后，你应该使用依赖注入将此服务注入到具体组件中。请参见此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 {}

注意：在这个例子中，我使用了来自angular2的EventEmitter，但它可以是任何你想要的。

- alexpods

---

感谢您的回复并澄清“观察者模式”的概念。 - Garry

Angular Emitter 的最新版本已更改为使用可观察对象 broadcaster.subscribe(generatedNumber => this.receivedNumber = generatedNumber);。 - screenm0nkey

请问您能否更新一下这个关于现代Angular 2的答案？我认为我已经接近成功了，但是我的component2没有捕获到事件，即使我已经更新使用subscribe。 - dennis.sheppard

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

}

- Tomas Marik

---

我使用了这种方法来获取Angular Materials工具栏的点击事件，以打开和关闭Angular Materials Sidenav组件 - 干杯 - user1694873