Angular 2 : event broadcast service

标签 angular typescript

我正在尝试创建事件广播服务。

这是我想要实现的基本概念:

export enum Event {
   EVENT_A,
   EVENT_B, ...
}


@Injectable()
export class BroadcastService {

     private broadcastSubject: Subject<Event> = new Subject<Event>();

     public next(event: Event): void {
         return this.broadcastSubject.next(event);
     }

     public subscribe(event: Event, componentCall: Function): void {
         this.broadcastSubject.subscribe(
             eventValue => {
                if(event === eventValue) {
                  componentCall(); // not possible to call component's method like this
                } 
             }
        );
   }
}

我知道我不能像这样从服务中调用组件的方法。我必须以某种方式返回 observable 并从组件调用它。我不确定如何实现这一目标。

感谢您的任何建议。


解决方案

感谢AngularFrance ,这里是 BroadcastService 的解决方案:

@Injectable()
export class BroadcastService {

  private broadcastSubject: BehaviorSubject<Event> = new BehaviorSubject<Event>(0);

  public next(event: Event): void {
     return this.broadcastSubject.next(event);
  }

  public subject(event: Event): Observable<Event> {
     return this.broadcastSubject.asObservable().filter(e => e === event);
  }

}

最佳答案

您应该从 BroadcastService 返回 observable(注意。Subject 是一个 Observable):

@Injectable()
export class BroadcastService {

     private event: Subject<Event> = new Subject<Event>();

     public next(event: Event): void {
       return this.event.next(event);
     }

     public getEvents(event: Event): Observable<Event> {
       // DO NOT SUBSCRIBE HERE. Return the observable.
       return this.event.asObservable()
         // Only keep events matching the given `event` param
         .filter(e => e == event);
     }
}

然后订阅组件返回的可观察对象:

export class MyComponent {

  constructor(bcservice: BroadcastService) {
    // Subscribe here.
    bcservice.getEvents(event).subscribe(eventValue => {
      this.someMethod();
    });
  }

  someMethod() { }

}

注意:如果您只想要流中的特定类型的事件,则在将不需要的事件添加到流中(在next( ) 方法)而不是返回流时。

关于 Angular 2 : event broadcast service,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42272336/

相关文章:

typescript - 为什么详尽检查对联合类型的作用不同?

typescript - 如何在 Vue.js 中使用路由( typescript )

javascript - 正则表达式在指令中不起作用 - Angular 4

angular - 剑道- Angular :How to represent list view of JSON object

angular - 在 Angular 2 中调用环境( native )特定的全局 javascript 函数

angular - Material 图标无法正确呈现

angular - 将 Promise 转换为 Observable

javascript - 无法读取未定义的属性 'login' - 测试 spy - Angular2+

javascript - TypeScript 编译器忽略 tsconfig.json 中的声明文件

javascript - ionic 混合移动应用程序获取设备位置