5

Please consider the bellow diagram for my application

enter image description here

EventsHub is a simple injectable 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 when 'announce' function is called from within Funds,Clients or any other component inside the router-outlet , the parent (MainApp) will not receive any messages.

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

Thanks

this case has been tested on RC1 & RC2

Hasan
  • 1,814
  • 1
  • 12
  • 14

2 Answers2

3

Ensure you provide EventsHub only once on a common parent (root component). DI maintains a single instance for every provider. If you provide it at every component that uses it every component gets a different instance. So one component listens on one instance and the other emits on another one.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you very much. I was injecting EventsHub in the child component 'Providers'. Once removed it from there , problem solved. – Hasan Jun 26 '16 at 10:19
0

For example your Funds component could have an EventEmitter

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

Then your Funds could emit this event my calling:

this.someEvent.emit({'Hello', 'from', 'the', 'other','side'});
null canvas
  • 10,201
  • 2
  • 15
  • 18