Angular 2：從另一個組件調用現有組件

Question

我使用路由功能創建了一個Angular 2應用程序，並且我有一個彈出組件，它由較高的路徑之一呈現，並且我想打開它一個組件中的點擊事件，由一個較深的路由呈現。

例如，假設我有一個包含彈出一個模板基礎路由器：

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

並以開放的方式簡單的彈出組件：

@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; 
    } 
} 

我怎麼能稱之爲顯示已由AppRoute從路由樹中某處駐留的另一個組件呈現的特定PopupComponent的方法？

我一直在使用依賴注入這樣的嘗試：

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

但這只是創建一個沒有實際呈現卻把PopupComponent的新實例。我怎樣才能調用AppRoute呈現的那個？

Answer 1

你需要一個共享服務

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

添加服務提供商AppRoute

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

注入服務popup-component和訂閱節目主題。

@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); 
    } 
} 

其注入到要顯示彈出，呼叫next在show主題的任何部分;

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