จะสมัครเข้าร่วมกิจกรรมกับบริการใน 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 สมัครเข้าร่วมกิจกรรมได้อย่างไรเมื่อบริการที่ยกมานั้นไม่ใช่ส่วนประกอบ

ฉันใช้ On 2.0.0-alpha.28

แก้ไข: แก้ไข "ตัวอย่างการทำงาน" ของฉันให้ใช้งานได้จริงดังนั้นจึงสามารถโฟกัสไปที่ส่วนที่ไม่ทำงานได้)

ตัวอย่างโค้ด: http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

อัปเดต : ฉันพบวิธีที่ดีกว่า / เหมาะสมในการแก้ปัญหานี้โดยใช้ BehaviorSubject หรือ Observable แทนที่จะเป็น EventEmitter โปรดดูคำตอบนี้: https://stackoverflow.com/a/35568924/215945

นอกจากนี้เอกสารเชิงมุมตอนนี้มีตัวอย่างเช่นตำราที่ใช้เรื่อง

ต้นฉบับ / ล้าสมัย / คำตอบที่ผิด:อีกครั้งไม่ได้ใช้ EventEmitter ในบริการ นั่นคือการต่อต้านรูปแบบ

การใช้ beta.1 ... NavService มี EventEmiter การนำทางคอมโพเนนต์ปล่อยเหตุการณ์ผ่านทางบริการและส่วนประกอบ ObservationComponent สมัครรับข้อมูลเหตุการณ์

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

การใช้อัลฟา 28 ผมเขียนโปรแกรมเพื่อสมัครรับ emitters เหตุการณ์โดยวิธีการeventEmitter.toRx().subscribe(..)วิธีการ เนื่องจากไม่ได้ใช้งานง่ายจึงอาจเปลี่ยนแปลงได้ในอนาคต