角2：別のコンポーネントから既存のコンポーネントを呼び出す

Question

ルーティング機能を使用して角2のアプリケーションを作成しています。上位のルートの1つでレンダリングされたポップアップコンポーネントがあります。より深いルートの1つによってレンダリングされるコンポーネント内のクリックイベント。

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

私はこれを呼び出すことができます方法：オープン方法で

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

とシンプルなポップアップ・コンポーネント：たとえば

、のは、私がポップアップを含むテンプレートとベースのルータを持っているとしましょうルーティングツリーのどこかにある別のコンポーネントから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

あなたはpopup-componentにサービスを注入し、ショーの対象に加入AppRoute

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

にプロバイダーにサービスを追加

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

共有サービスを必要としています。

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

show被写体にnextを呼び出し、あなたがポップアップを表示したい任意のコンポーネントにそれを注入します。

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