Angular2 interaction of the routed component with the parent

Question

Please review the chart below for my application

EventsHub is a simple injection service:

import {Injectable} from '@angular/core'; import {Subject} from 'rxjs/Subject'; @Injectable() export class EventsHub { private announcementSource = new Subject<string>(); messageAnnounced$ = this.announcementSource.asObservable(); announce( message : string) { console.log('eventHub : firing...'+message); this.announcementSource.next(message); } } 

The problem is that the “announcement” function is called from funds, clients or any other component inside the router, the parent (MainApp) does not receive any messages.

On the other hand, when I call the same utility function from NavigationMenu, MainApp receives the event just fine. So, how are routed components supposed to interact with their parent?

thanks

this case has been tested on RC1 and RC2

Answer 1

Make sure that you provide EventsHub only once for the common parent (root component). DI supports one instance for each provider. If you provide it to every component that uses it, each component gets a different instance. Thus, one component listens on one instance, and another emits another.

Answer 2

For example, your Funds component may have an EventEmitter

 @Output() someEvent: EventEmitter<SomeResult> = new EventEmitter<SomeResult>(); 

Then your funds could issue this event for my call:

 this.someEvent.emit({'Hello', 'from', 'the', 'other','side'});