Как подписаться на мероприятие на службе в 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

EDIT: Модифицированная мой «рабочий пример» на самом деле работает, поэтому фокус может быть поставлен на не-рабочей части;)

Пример код: http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

Answer 1

Обновление: Я нашел лучший/правильный способ решить эту проблему, используя BehaviorSubject или Observable, а не EventEmitter. Пожалуйста, см. Этот ответ: https://stackoverflow.com/a/35568924/215945

Кроме того, Угловые документы теперь имеют cookbook example that uses a Subject.

---

Оригинал/устаревшие/неправильный ответ: снова, don't use an EventEmitter in a service. Это анти-шаблон.

Использование бета-версии 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

Answer 2

Используя альфа 28, я выполнил программную подписку на излучатели событий с помощью метода eventEmitter.toRx().subscribe(..). Поскольку это не интуитивно, возможно, это может измениться в будущей версии.