Angular 2: вызов существующего компонента из другого компонента

Question

Я создаю приложение с Angular 2, используя функции маршрутизации, и у меня есть всплывающий компонент, который отображается одним из более высоких маршрутов, и я хочу открыть его по событию click в компоненте, который отображается одним из более глубокие маршруты.

Например, допустим, у меня есть базовый маршрутизатор с шаблоном, содержащим всплывающее окно:

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

Как я могу вызвать этот метод показа для этого конкретного PopupComponent, который уже был обработан AppRoute из другого компонента, который находится где-то в дереве маршрутизации?

Я попытался с помощью внедрения зависимости, как это:

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