Как подписаться на событие на сервисе в Angular2?

Question

Как подписаться на событие на сервисе в 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-Альфа.28

EDIT: модифицированный мой "рабочий пример" на самом деле работает, поэтому фокус можно поставить на неработающую часть ;)

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

680 2

javascript angular

2 ответов:

Comments

Ничего не найдено.

Mark Rajcok · Accepted Answer · 2017-05-23 15:34:53

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

кроме того, угловые документы теперь есть пример поваренной книги, которая использует тему.

оригинальный / устаревший / неправильный ответ: опять не используйте EventEmitter в сервисе. То есть антишаблон.

С помощью бета-версии.1... NavService содержит EventEmiter. Компонент навигация выдает события через сервис, а компонент ObservingComponent подписывается на события.

nav.услуга.ТС
import {EventEmitter} from 'angular2/core';
export class NavService {
  navchange: EventEmitter<number> = new EventEmitter();
  constructor() {}
  emitNavChangeEvent(number) {
    this.navchange.emit(number);
  }
  getNavChangeEmitter() {
    return this.navchange;
  }
}
компоненты.ТС
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

Runeboy · Accepted Answer · 2017-10-24 17:19:42

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