[英]Angular 2: Call existing component from another component
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. 但这只是创建了一个尚未实际渲染的PopupComponent的新实例。 How can I call the one that is rendered by the AppRoute?
如何调用AppRoute呈现的那个?
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-component
and 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 next
on the show
subject; 将它注入要显示弹出窗口的任何组件,在
show
subject上调用next
;
@Component({
selector: 'my-component',
template: '<button (click)="showPopup()"></button>'
})
export class MyComponent {
constructor(private popup: PopupService) { }
showPopup() {
this.popup.show.next(true);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.