How to broadcast events from app.component to router-outlet in angular2

Question

I have created a service that has a stream$ that will emit an event, I hope after the app.component fires the stream$ emit, the child component in the <router-outlet></router-outlet> will be able to subscribe it, but now the problem I have is even if it subscribes it in the constructor, the subscription call back never gets fired.

I wonder if this is different from when emitting events through a stream service?

What is the best practice?

Answer 1

The most simple way is to create event bus service:

export class EventBusService
{
    bus:Subject<Event> = new Subject<Event>();

    dispatch(data:Event){
        this.bus.next(data);
    }

    //its up to you how to implement it:
    listen(type:string):Observable<Event> {
        return this.bus.filter(event=>event.type === type);
    }
}

Use dependency injection:

bootstrap(App, [EventBusService]);

Component constructor:

constructor(bus:EventBusService){
   bus.dispatch(new Event());
   bus.listen('load').subscribe((e)=>{console.log('loaded');})
}