角度2:从另一个组件调用现有组件 [英] Angular 2: Call existing component from another component

问题描述

我正在使用路由功能使用Angular 2创建一个应用程序，并且我有一个弹出组件，该组件由上一条较高的路线之一呈现，我想在呈现的组件中的click事件上将其打开通过其中一条更深的路线.

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.

例如，假设我有一个基本路由器，其模板包含弹出窗口:

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

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

还有一个带有打开方法的简单弹出组件:

And a simple popup component with an open method:

@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上调用此show方法，该PopupComponent已由AppRoute从位于路由树中某处的另一个组件呈现出来了?

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?

我曾经尝试过使用依赖注入:

I have tried using dependency injection like this:

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

但这只是创建一个PopupComponent的新实例，而该实例实际上尚未呈现.我该如何称呼由AppRoute呈现的那个?

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?

推荐答案

您需要共享服务

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并订阅表演主题.

Inject the service to popup-component and subscribe to the show 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；

Inject it to any component where you want to show the popup, call next on the show subject;

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

这篇关于角度2:从另一个组件调用现有组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！