Sé cómo generar un evento con EventEmitter. También puedo adjuntar un método para llamar 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 On 2.0.0-alpha.28
EDITAR: modifiqué mi "ejemplo de trabajo" para que realmente funcione, por lo que el enfoque se puede poner en la parte que no funciona;)
Código de ejemplo: http://plnkr.co/edit/m1x62WoCHpKtx0uLNsIv
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://stackoverflow.com/a/35568924/215945
Además, los documentos de Angular 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 el 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); } }Usando alpha 28, logré suscribirme programáticamente a los emisores de eventos a través del método eventEmitter.toRx().subscribe(..) . Como no es intuitivo, quizás cambie en una versión futura.