javascript - change - observable angular 6 ejemplo

¿Cómo suscribirse a un evento en un servicio en Angular2?

Question

Sé cómo generar un evento con EventEmitter. También puedo adjuntar un método para que se llame si tengo un componente como este:

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

Cuando tengo un componente como este, todo funciona muy bien. Moví algo de lógica a un servicio y necesito generar un evento desde dentro del Servicio. Lo que hice fue esto:

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

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

Tengo un componente que necesita actualizar algún valor basado en este evento, pero parece que no puedo hacerlo funcionar. Lo que probé fue esto:

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

¿Cómo hago para que MyComponent se suscriba al evento cuando el servicio que lo genera no es un componente?

Estoy en 2.0.0-alpha.28

EDITAR: Modifiqué mi "ejemplo de trabajo" para que realmente funcione, por lo que se puede enfocar en la parte que no funciona;)

Código de ejemplo: http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv

Answer 1

Usando alpha 28, logré suscribirme mediante programación a los emisores de eventos mediante el método eventEmitter.toRx().subscribe(..) . Como no es intuitivo, tal vez pueda cambiar en una versión futura.

Answer 2

Actualización : He encontrado una forma mejor / adecuada de resolver este problema utilizando un BehaviorSubject o un Observable en lugar de un EventEmitter. Consulte esta respuesta: https://.com/a/35568924/215945

Además, los documentos angulares ahora tienen un ejemplo de libro de cocina que usa un Asunto .

Respuesta original / desactualizada / incorrecta: nuevamente, no use un EventEmitter en un servicio . Eso es un antipatrón.

Usando beta.1 ... NavService contiene EventEmiter. Component Navigation emite eventos a través del servicio, y el componente ObservingComponent se suscribe a los eventos.

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

componentes.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