Angular 2 => notify a route component of an event in the app component

Question

Slowly getting to grips with angular 2 but I've come to dead end on one particular issue.

If you have this arrangement;

<parent>
    <child/>
</parent>

I can notify the child of changes in the parent by using @Input() and get it to listen to changes. I can notify the parent of changes in the child by using the @Output() and EventEmitters.

What I'm now looking at is notifying a routed component (a component that is loaded dynamically when a link it clicked) about a specific event that happens in the main appComponent. See example below;

<app>
    <button (click)='addEntity()>Add</button>
    <router-outlet></router-outlet>
</app>

I want to be able to notify the component that is loaded into the router-outlet that the button has been clicked.

An example of usage would be having multiple features (heroes/contacts/pets etc) each with its own dialog for adding an entity. Depending on the selected route, it would need to notify the selected feature component (e.g. ContactComponent) to display its specific detail component/view/template (e.g. contact-detail.component).

Whats the best way to achieve this?

Cheers

Answer 1

There's also the possibility of just using a shared service to communicate between different components, e.g. via a messenger service like this:

MessengerService

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class MessengerService {
    private messageSource: BehaviorSubject<boolean> = new BehaviorSubject(true); 
    public message = this.messageSource.asObservable();
    public buttonClicked(value: boolean) {
        this.messageSource.next(value);
    }
}

Parent Component

export class ParentComponent {
    constructor(private messengerService: MessengerService) { }
    addEntity() {
        this.messengerService.buttonClicked(true);
    }
}

Child Component

import { Subscription } from 'rxjs/Rx';
export class ChildComponent implements OnInit, OnDestroy {
    private messageSubscription: Subscription;
    constructor(private messengerService: MessengerService) { }
    ngOnInit() {
        this.messageSubscription = this.messengerService.message.subscribe(m => {
            // Act upon the click event
        });
    }
    ngOnDestroy() {
        this.messageSubscription.unsubscribe();
    }
}

This would be a clean way to decouple the components and rely on a messenger service (that you could subscribe to in multiple components, wherever it is required)

Answer 2

Well if I understand well your question try this: put a return value on the addEntity() method, can be an string, or something that you know the kind of thing that you are adding (heroes/contacts/pets). Then on the main template put a local variable that takes the return of the addEntity() method like this:

<button (click)='#type_added = addEntity()>Add</button>

then you can pass that "#type_added" local variable to the other component like this:

<router-outlet [added] = #type_added></router-outlet>

and you must declare in your router-outlet component (.ts) the variable "added" whidth the @Output.