如何订阅Angular2中某项服务的活动？

Question

我知道如何用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

Answer 1

库原因的快速修复，添加了事件导入，如

import { EventEmitter } from 'events';

您必须使用订阅通过核心库进行更改

import { EventEmitter } from '@angular/core';

Answer 2

使用 alpha 28，我通过 eventEmitter.toRx（）.subscribe（..） 方法以编程方式订阅事件发射器。由于它不直观，因此可能会在将来的版本中进行更改。

Answer 3

更新：我找到了一种更好/正确的方法来解决此问题，使用行为主体或可观察量而不是事件发射器。请看这个答案：https://stackoverflow.com/a/35568924/215945

此外，Angular文档现在有一个使用主题的食谱示例。

原始/过时/错误答案：同样，不要在服务中使用事件发射器。这是一种反模式。

使用beta.1… NavService包含EventEmiter。组件导航通过服务发出事件，组件观察组件订阅事件。

导航服务.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;
  }
}

组件.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);
  }
}

扑通一声