我正在使用路由功能使用 Angular 2 创建一个应用程序,并且我有一个由较高路由之一呈现的弹出组件,并且我想在由以下之一呈现的组件中的单击事件上打开它更深层次的路线。
例如,假设我有一个基本路由器,其模板包含弹出窗口:
@Component({
selector: 'application',
template: '<router-outlet></router-outlet><popup-component></popup-component>',
directives: [PopupComponent]
})
@RouteConfig([
{ ... },
{ ... }
])
export class AppRoute { }
以及一个带有 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;
}
}
如何在已由 AppRoute 从驻留在路由树中某处的另一个组件中呈现的特定 PopupComponent 上调用此 show 方法?
我尝试过像这样使用依赖注入:
@Component({
selector: 'my-component',
template: '<button (click)="showPopup()"></button>'
})
export class MyComponent {
constructor(private popup: PopupComponent) { }
showPopup() {
this.popup.show();
}
}
但这只是创建了一个尚未实际渲染的 PopupComponent 的新实例。我怎样才能调用AppRoute渲染的那个呢?