我正在尝试使用嵌套子组件中的按钮切换位于我的主 App 模板顶部的侧边导航菜单。我无法弄清楚如何到达父级中的 sidenav 组件以告诉它 sidenav.open()
.
我知道子组件上的 @Input 和 @Output,但据我了解,要使用它,我需要为子组件提供某种 DOM 标记以将它们附加到?如:
<app>
<sidenav-component #sidenav>...</sidenav-component>
<child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"></child>
</app>
有关如何执行此操作的大量文章。问题是我路由到这个组件所以没有<child>
标记明确存在于代码中。相反,我的代码是这样的:
<app>
<sidenav-component #sidenav>...</sidenav-component>
<router-outlet></router-outlet>
</app>
如果我有一个路由到的子组件,我该怎么做 sidenav.open()
或者以某种方式从 child 访问父组件?
一些想法:我已经做了一些研究并考虑了几种方法,但不确定它们是否正确或是否有效......一种方法是使用 Injector 服务并尝试遍历父级,但是这感觉不对:
// child component
constructor(injector: Injector) {
this.something = injector.parent.get(Something);
}
或者可能在父组件中创建一个服务,以某种方式附加到 Sidenav 组件,然后将此服务注入(inject)子组件??
最佳答案
最简单和最干净的方法确实是利用服务。
服务可能的样子:
export class DomService {
sidebarVisible: boolean = true;
showSidebar() {
sidebarVisible = true;
}
hideSidebar() {
sidebarVisible = false;
}
toggleSidebar() {
sidebarVisible = !sidebarVisible;
}
}
在您的 bootstrap
调用中将服务添加到提供者列表中:
bootstrap(App, [
// other providers
DomService
]);
在要显示/隐藏侧边栏的组件(可能在 app.ts
中,但也可能在您的 sidenav.ts
中)添加注入(inject)服务:
constructor(private _domService: DomService) {
}
在您的模板中,您现在可以在要切换/显示/隐藏的位置执行以下操作:
<sidenav-component *ngIf="_domService.sidebarVisible">...</sidenav-component>
<div id="toggle-sidebar" (click)="_domService.toggleSidebar()">toggle</div>
关于angular - 从 *Routed* 子组件访问父 @Component 和变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37769187/