从 *Roated* 子组件访问父 @Component 和变量

我正在尝试使用嵌套子组件中的按钮切换位于主应用程序模板顶部的侧面导航菜单。我不知道如何到达父级中的 sidenav 组件来告诉它sidenav.open().

我知道子组件上的 @Input 和 @Output，但据我了解，要使用它，我需要有某种 DOM 标签供子组件将它们附加到？例如：

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"></child>
</app>

有大量关于如何执行此操作的文章。问题是我是routing到这个组件所以没有<child>标签明确存在于代码中。相反，我的代码是这样的：

<app>
  <sidenav-component #sidenav>...</sidenav-component>

  <router-outlet></router-outlet>
</app>

如果我有一个被路由到的子组件，我该如何做sidenav.open()或者以某种方式从子级访问父级中的组件？

一些想法：我已经做了一些研究并思考了几种方法，不确定它们是否正确或者是否有效...一种方法是使用 Injector 服务并尝试遍历到父级，但这感觉不对:

// child component
constructor(injector: Injector) {
  this.something = injector.parent.get(Something);
}

或者可能在父级中创建一个服务，以某种方式附加到 Sidenav 组件，然后将该服务注入到子级中？

最简单、最干净的方法确实是利用服务。

服务大概是这样的：

export class DomService {
    sidebarVisible: boolean = true;

    showSidebar() {
        sidebarVisible = true;
    }

    hideSidebar() {
        sidebarVisible = false;
    }

    toggleSidebar() {
        sidebarVisible = !sidebarVisible;
    }
}

In your bootstrap调用将服务添加到提供者列表中：

bootstrap(App, [
    // other providers
    DomService
]);

在组件中（也许在app.ts但也在你的sidenav.ts）在您想要显示/隐藏侧边栏的位置添加注入服务：

constructor(private _domService: DomService) {

}

在您的模板中，您现在可以在想要切换/显示/隐藏的位置执行以下操作：

<sidenav-component *ngIf="_domService.sidebarVisible">...</sidenav-component>

<div id="toggle-sidebar" (click)="_domService.toggleSidebar()">toggle</div>