Angular 2: Call existing component from another component
<p>I'm creating an app with Angular 2 using the routing features, and I have a popup component that is rendered by one of the higher up routes, and I want to open it on a click event in a component that is rendered by one of the deeper routes.</p>

<p>For example, let's say I have a base router with a template containing the popup:</p>

<pre><code>@Component({
    selector: 'application',
    template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;&lt;popup-component&gt;&lt;/popup-component&gt;',
    directives: [PopupComponent]
})
@RouteConfig([
    { ... },
    { ... }
])
export class AppRoute { }
</code></pre>

<p>And a simple popup component with an open method:</p>

<pre><code>@Component({
    selector: 'popup-component',
    template: '&lt;div [class.show]="isVisible"&gt;This is a popup.&lt;/div&gt;'
})
export class PopupComponent {
    public isVisible: boolean = false;
    show() {
        this.isVisible = true;
    }
}
</code></pre>

<p>How can I call this show method on that specific PopupComponent that was already rendered by the AppRoute from another component that resides somewhere down in the routing tree?</p>

<p>I have tried using dependency injection like this:</p>

<pre><code>@Component({
    selector: 'my-component',
    template: '&lt;button (click)="showPopup()"&gt;&lt;/button&gt;'
})
export class MyComponent {
    constructor(private popup: PopupComponent) { }
    showPopup() {
        this.popup.show();
    }
}
</code></pre>

<p>But this just creates a new instance of the PopupComponent that isn't actually rendered yet. How can I call the one that is rendered by the AppRoute?</p>