Angular 2 EventEmitter - broadcast the next (...) from a utility function

Question

As far as I understand, the .toRx () function. subscribe (...) is for receiving RECEIVE messages, and the .next () function is for receiving BROADCAST messages

In this plnkr ( http://plnkr.co/edit/MT3xOB?p=info ) you call the .toRx () function. subscribe (...) from a data object that appears to be defined / inferred from the template:

@Component({ selector : 'child-cmp', template : '', inputs : ['data'] }) class ChildCmp { afterViewInit() { this.data.toRx().subscribe((data) => { console.log('New data has arrived!', data); }); } } 

In this plnkr ( http://plnkr.co/edit/rNdInA?p=preview ) you call the .toRx () function. subscribe (...) from the evt object and its emitter function (coming from the Service introduced into the component constructor)

 @Component({ selector : 'parent-cmp', template : '' }) class ParentCmp { constructor(evt: EventService) { evt.emitter.subscribe((data) => console.log("I'm the parent cmp and I got this data", data)); } } 

Is it possible for BROADCAST to be executed in the function of the Service itself, at the same time, is it possible for the component to receive a RECEIVE message without relying on the returned service object or Template data object to bind it. toRX (). Sign (...) the invokation function?

 import {Injectable, EventEmitter} from 'angular2/angular2'; @Injectable() export class DataService { items:Array<any>; dispatcher: EventEmitter = new EventEmitter(); constructor() { this.items = [ { name: 'AAAA' }, { name: 'BBBB' }, { name: 'CCCC' } ]; } getItems() { return this.items; } sendItems() { this.dispatcher.next( this.items ); } } export var DATA_BINDINGS: Array<any> = [ DataService ]; @Component({ selector: 'rabble' }) @View({ ... }) export class Rabble { items : Array<any>; constructor( public dataService : DataService) { console.log('this.routeParam', this.dataService.getItems()); } afterViewInit() { this.???.toRx().subscribe((data) => { console.log('New item data has arrived!', data); }); } handleClick() { this.dataService.sendItems(); } } 

Answer 1

UPDATED 2.0. Stable: EventEmitter is now intended solely for linking components. This is best used for objects and ReplaySubjects. I updated the examples to 2.0 code.

BETA 1 IS UPDATED: You no longer need to call .toRx () on the emitter, so I update the code to match and add an example to cancel the subscription.

So, right now (Alpha 45) eventEmitter has a toRx () method that returns RxJS SUBJECT

You can do a little Google what it is and what you can do with it, but that’s what you really mess with. When you call toRx (), it just returns an internal object from eventEmitter, so you can do this in your services constructor.

Then I added the function that you want to do translation for the event service

 class EventService { //could be regular Subject but I like how ReplaySubject will send the last item when a new subscriber joins emitter: ReplaySubject<any> = new ReplaySubject(1); constructor() { } doSomething(data){ this.emitter.next(data); } } 

Then in your component you subscribe to the emitter

 class ParentCmp { myData: any; constructor(private evt: EventService) { //rx emitter this.evt.emitter.subscribe((data) => { this.myData = data; console.log("I'm the parent cmp and I got this data", data)); } } } 

And here is an extended class with built-in unsubscribe (dispose)

 export class ParentCmp implements OnDestroy { myData: any; subscription: any; constructor(evt: EventService) { //rx emitter this.subscription = evt.emitter.subscribe((data) => { this.myData = data; console.log("I'm the parent cmp and I got this data", data)); } } ngOnDestroy() { this.subscription.dispose(); } } 

I am a bit confused about your last question, but I’ll think about the term “get a message.” You must be listening to something that the subscription method does and is required.

The cool thing is that now you can call it observable everywhere (even in other services), and IMO is the best way to communicate between components. They do not need to know their position in the tree or to care about whether other components exist or are listening.

I hid my Plunker while working HERE (still on Alpha45)

RxJs source and related information

Angular2 source and object information inside eventEmitter

Answer 2

In beta, you no longer need to convert it to an RxJs object using toRx ().

 var evtEmitter = new EventEmitter(); evtEmitter.emit(args); evtEmitter.subscribe((args)=>{console.log('new event')});