events - Angular 2事件广播

Question

Angular 2 的新手。我正在研究在同一级别组件之间广播事件。目前我知道 EventEmitter 只是可以将事件传递给上层组件。

我检查过这个this link并且知道 observable 可能是解决我的问题的一种方法，但该 url 中的示例似乎对我不起作用。

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

Answer 1

您只需要创建一些服务来发送您可以订阅的消息。可以是Observable来自 rxjs, EventEmitter来自 node.js，或任何跟在 Observable pattern 之后的东西.然后你应该使用依赖注入(inject)将这个服务注入(inject)到具体的组件中。参见 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 在这个例子中我使用 EventEmitter来自 angular2，但同样，它可以是任何你想要的