Angular 2事件广播

Question

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

我已经检查了这个链接并知道可观察的方法可能是解决我的问题的方法,但该网址中的示例似乎对我不起作用.

有没有人知道如何使用它(可观察)广播事件或一些其他方式将事件转移到相同级别的组件？

Answer 1

您只需要创建一些可以发出可以订阅的消息的服务.它可以Observable来自rxjs,EventEmitter来自node.js,或者遵循Observable模式的任何其他内容.然后,您应该使用依赖注入将此服务注入具体组件.看到这个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在这个例子中我使用EventEmitterangular2,但同样,它可以是你想要的任何东西

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

}