Question

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

我已经检查了这个this link并知道可观察的方法可能是一种解决我问题的方法，但该网址中的示例似乎对我不起作用。

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

Answer 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，但同样，它可以是您想要的任何内容

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

}

Angular 2事件广播

2 个答案: