从 *Routed* 子组件访问父 @Component 和 vars

Question

我正在尝试使用嵌套子组件中的按钮切换位于主应用模板顶部的侧导航菜单。我不知道如何到达父级中的 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() 或以某种方式从子组件访问父组件？

一些想法：我已经进行了一些研究并考虑了几种方法，但不确定它们是否正确或什至可行...一种方法是使用 Injector 服务并尝试遍历父级，但是这感觉不对：

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

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

Answer 1

我喜欢接受的答案，似乎是一种更强大的 Angular 方式来正确地做到这一点（特别是如果您要添加更多选项）。

但是，我希望通过 Id 快速脏访问全局元素。每个人都在谈论使用@ViewChild，但我想爬上树。我刚回学校，在组件方法中使用了这个：

document.getElementById('nav-panel').className = 'hide';

如果我们想要这个的多个副本工作（例如左侧和右侧菜单），我们需要在孩子们身上注入一些东西，这样他们就知道要寻找哪个 Id。

Answer 2

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

服务的样子：

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 中）添加注入服务：

constructor(private _domService: DomService) {

}

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

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

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