角度2事件广播 [英] Angular 2 event broadcast

问题描述

新到角度2.我正在广播一个同级别组件之间的事件。目前我知道EventEmitter只是可以将事件转移到上级组件。

New to Angular 2. I'm working on broadcast a event between same level component. Currently I know EventEmitter just can transfer a event to upper level component.

我已经检查过这个此链接并且知道可观察可能是一种解决我的问题的方法，但是样本网址似乎不适合我。

I have checked this this link and know observable may be a way to solve my problem, but the sample in that url seems not work for me.

有没有人知道如何使用它（可观察）广播事件或其他方式将事件传输到同一个级别的组件？

Does anyone know how to use it(observable) for broadcast event or some other way to transfer event to same level components?

推荐答案

您只需创建一些将发送可以订阅的消息的服务。它可以是 可观察 来自 rxjs ， EventEmitter node.js 的$ c> ，或可观察模式之后的其他任何内容。那么你应该使用依赖注入来将这个服务注入到具体的组件中。请参阅这个空格。

You just need to create some service that will emit messages on which you can subscribe. It can be Observable from rxjs, EventEmitter from node.js, or anything else that follows Observable pattern. Then you should use Dependency Injection to inject this service into concrete components. See 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 在本例中，我使用< a href =https://github.com/angular/angular/blob/2.0.0-alpha.44/modules/angular2/src/core/facade/async.ts#L88> EventEmitter from angular2，但再次，它可以是任何你想要的

PS In this example I use EventEmitter from angular2, but again, it can be whatever you want

这篇关于角度2事件广播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！