Làm thế nào để đăng ký một sự kiện trên một dịch vụ trong Angular2?

Tôi biết cách nâng cao sự kiện bằng EventEmitter. Tôi cũng có thể đính kèm một phương thức được gọi nếu tôi có một thành phần như sau:

<component-with-event (myevent)="mymethod($event)" />

Khi tôi có một thành phần như thế này, mọi thứ hoạt động tuyệt vời. Tôi đã chuyển một số logic vào một dịch vụ và tôi cần nêu ra một sự kiện từ bên trong Dịch vụ. Những gì tôi đã làm là:

export class MyService {
  myevent: EventEmitter = new EventEmitter();

  someMethodThatWillRaiseEvent() {
    this.myevent.next({data: 'fun'});
  }
}

Tôi có một thành phần cần cập nhật một số giá trị dựa trên sự kiện này nhưng dường như tôi không thể làm cho nó hoạt động. Những gì tôi đã thử là:

//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
  }
}

Làm cách nào để đặt MyComponent đăng ký sự kiện khi dịch vụ nâng cao nó không phải là một thành phần?

Tôi đang sử dụng Trên 2.0.0-alpha.28

CHỈNH SỬA: Đã sửa đổi "ví dụ làm việc" của tôi để thực sự hoạt động, vì vậy có thể tập trung vào phần không hoạt động;)

Mã ví dụ: http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

Cập nhật : Tôi đã tìm thấy một cách tốt hơn / thích hợp để giải quyết vấn đề này bằng cách sử dụng BehaviorSubject hoặc Observable thay vì EventEmitter. Vui lòng xem câu trả lời này: https://stackoverflow.com/a/35568924/215945

Ngoài ra, các tài liệu Angular hiện có một ví dụ về sách nấu ăn sử dụng Chủ đề .

Câu trả lời gốc / lỗi thời / sai: một lần nữa, không sử dụng EventEmitter trong một dịch vụ . Đó là một mô hình chống.

Sử dụng phiên bản beta.1 ... NavService chứa EventEmiter. Thành phần Điều hướng phát ra các sự kiện thông qua dịch vụ và thành phần ObservingComponent đăng ký các sự kiện.

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;
  }
}

thành phần.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

Sử dụng alpha 28, tôi đã hoàn thành việc đăng ký theo chương trình với các trình phát sự kiện bằng eventEmitter.toRx().subscribe(..)phương pháp này. Vì nó không trực quan, nó có thể thay đổi trong một bản phát hành trong tương lai.