Angular 2: Rufen Sie eine vorhandene Komponente aus einer anderen Komponente

Question

Ich bin eine Anwendung mit Angular 2 mit den Routing-Funktionen erstellen, und ich habe eine Popup-Komponente, die von einer der höheren Routen gerendert wird, und ich möchte es öffnen Ein Klickereignis in einer Komponente, die von einer der tieferen Routen gerendert wird.

Zum Beispiel lassen Sie sich sagen, dass ich einen Basis-Router mit einer Vorlage habe mit dem Pop-up:

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

Und eine einfache Popup-Komponente mit einer offenen Methode:

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

Wie kann ich das nennen Methode für diese bestimmte PopupComponent anzeigen, die bereits von AppRoute von einer anderen Komponente gerendert wurde, die sich irgendwo im Routingbaum befindet?

Ich habe versucht, Dependency Injection, wie dies mit:

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

Aber das schafft nur eine neue Instanz der PopupComponent, die nicht tatsächlich noch gerendert wird. Wie kann ich die von AppRoute gerenderte aufrufen?

Answer 1

Sie benötigen einen Shared-Service-

import {Injectable} from 'angular2/core'; 
import {Subject} from 'rxjs/Rx'; 
export class PopupService{ 
    show:Subject<boolean> = new Subject(); 
} 

den Service-Provider hinzufügen in AppRoute

@Component({ 
    providers:[PopupService], 
    selector: 'application', 
    ... 
]) 
export class AppRoute { } 

den Dienst popup-component injizieren und zur Show Thema abonnieren.

@Component({ 
    selector: 'popup-component', 
    template: '<div [class.show]="isVisible">This is a popup.</div>' 
}) 
export class PopupComponent { 
    public isVisible: boolean = false; 
    constructor(private popup: PopupService) { 
     popup.show.subscribe((val:boolean) => this.isVisible = val); 
    } 
} 

Injizieren Sie es auf jede Komponente in dem Sie das Popup angezeigt werden soll, next auf dem show Thema nennen;

@Component({ 
    selector: 'my-component', 
    template: '<button (click)="showPopup()"></button>' 
}) 
export class MyComponent { 
    constructor(private popup: PopupService) { } 
    showPopup() { 
     this.popup.show.next(true); 
    } 
}