typescript Angular 2：从另一个组件调用现有组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36456564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: Call existing component from another component
提问by Bliss
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.
我正在使用路由功能创建一个带有 Angular 2 的应用程序，并且我有一个由较高路由之一呈现的弹出组件，我想在由其中一个呈现的组件中的单击事件中打开它更深的路线。
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:
还有一个带有 open 方法的简单弹出组件：
@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;
}
}
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?
如何在 AppRoute 已经从位于路由树下方某处的另一个组件呈现的特定 PopupComponent 上调用此 show 方法？
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();
}
}
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?
但这只是创建了一个尚未实际呈现的 PopupComponent 的新实例。如何调用由 AppRoute 呈现的那个？
回答by Abdulrahman Alsoghayer
You need a shared service
您需要共享服务
import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Rx';
export class PopupService{
show:Subject<boolean> = new Subject();
}
Add the service to providers in AppRoute
将服务添加到提供者 AppRoute
@Component({
providers:[PopupService],
selector: 'application',
...
])
export class AppRoute { }
Inject the service to popup-componentand subscribe to the show subject.
将服务注入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 );
}
}
Inject it to any component where you want to show the popup, call nexton the showsubject;
它注入到要显示弹出，呼叫任何组件next的show主题;
@Component({
selector: 'my-component',
template: '<button (click)="showPopup()"></button>'
})
export class MyComponent {
constructor(private popup: PopupService) { }
showPopup() {
this.popup.show.next(true);
}
}
