从*路由*子组件访问父组件和vars

Question

我正在尝试切换一个侧导航菜单，它位于我的主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()或以某种方式访问父组件？

一些想法:我对几种方法做了一些研究和思考，但不确定它们是否正确，甚至不确定work...One方法是否使用Injector服务并试图遍历到父方法，但这感觉是错误的：

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

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

Answer 1

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

该服务的外观如下：

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>

Answer 2

我喜欢接受的答案，似乎是一种更健壮的角度正确的方法(特别是如果你要增加更多的选项)。

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

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

如果我们想要多个副本来工作(例如左菜单和右菜单)，我们需要向孩子们注入一些东西，以便他们知道要查找哪个Id。