如何订阅Angular2中的服务事件？
我知道如何通过EventEmitter举办一个活动。 如果我有一个这样的组件，我也可以附加一个被调用的方法：
<component-with-event (myevent)="mymethod($event)" /> 当我有这样的组件，一切都很好。 我把一些逻辑转移到一个服务中，我需要从服务内部引发一个事件。 我做的是这样的：
export class MyService { myevent: EventEmitter = new EventEmitter(); someMethodThatWillRaiseEvent() { this.myevent.next({data: 'fun'}); } }
我有一个组件需要更新一些基于这个事件的价值，但我似乎无法使其工作。 我试过的是这样的：
//Annotations... export class MyComponent { constructor(myService: MyService) { //myService is injected properly and i already use methods/shared data on this. myService.myevent.on(... // 'on' is not a method <-- not working myService.myevent.subscribe(.. // subscribe is not a method <-- not working } }
如何使MyComponent订阅该事件时引发它的服务不是一个组件？
我在2.0.0-alpha.28上
编辑：修改我的“工作示例”，以实际工作，所以重点可以放在非工作的一部分;）
示例代码： http : //plnkr.co/edit/m1x62WoCHpKtx0uLNsIv
更新 ：我find了一个更好/正确的方法来解决这个问题，使用BehaviorSubject或Observable而不是EventEmitter。 请参阅此答案： https : //stackoverflow.com/a/35568924/215945
此外，Angular文档现在有一个使用主题的菜谱示例 。
原始/过时/错误的答案：再次， 不要在服务中使用EventEmitter 。 这是一个反模式。
使用beta.1 … NavService包含EventEmiter。 组件导航通过服务发出事件，组件ObservingComponent订阅事件。
nav.service.ts
import {EventEmitter} from 'angular2/core'; export class NavService { navchange: EventEmitter<number> = new EventEmitter(); constructor() {} emitNavChangeEvent(number) { this.navchange.emit(number); } getNavChangeEmitter() { return this.navchange; } }
components.ts
import {Component} from 'angular2/core'; import {NavService} from '../services/NavService'; @Component({ selector: 'obs-comp', template: `obs component, item: {{item}}` }) export class ObservingComponent { item: number = 0; subscription: any; constructor(private navService:NavService) {} ngOnInit() { this.subscription = this.navService.getNavChangeEmitter() .subscribe(item => this.selectedNavItem(item)); } selectedNavItem(item: number) { this.item = item; } ngOnDestroy() { this.subscription.unsubscribe(); } } @Component({ selector: 'my-nav', template:` <div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div> <div class="nav-item" (click)="selectedNavItem(2)">nav 2 (click me)</div> `, }) export class Navigation { item = 1; constructor(private navService:NavService) {} selectedNavItem(item: number) { console.log('selected nav item ' + item); this.navService.emitNavChangeEvent(item); } }
Plunker
使用alpha 28，我通过eventEmitter.toRx().subscribe(..)方法以编程方式订阅事件发射器。 因为它不直观，它可能会在未来的版本中发生变化。
