从 *Routed* 子组件访问父@Component 和 vars [英] Access Parent @Component and vars from *Routed* Child Component

问题描述

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

I am trying to toggle a side nav menu, located at the top of my main App template using a button in a nested child component. I can't figure out how to get to the sidenav component in the parent to tell it to sidenav.open().

我知道子组件上的@Input 和@Output，但据我所知，要使用它，我需要为子组件添加某种DOM 标记以将它们附加到?如:

I know about @Input and @Output on a child component, but as I understand it, to use this I need to have some sort of DOM tag for the child component to attach these to? Such as:

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

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

关于如何做到这一点的大量文章.问题是我正在路由到这个组件，所以代码中没有显式存在 标记.而是我的代码是这样的:

Tons of articles on how to do this. Problem is that I'm routing to this component so no <child> tag exists explicitly in the code. Rather my code is like this:

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

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

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

If I have a child component that gets routed to, how do I do a sidenav.open() or somehow access a component in the parent from the child?

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

Some thoughts: I've done some research and thinking about a couple of approaches and not sure if they are correct or would even work...One approach being using the Injector service and trying to traverse up to the parent, but this feels wrong:

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

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

Or possibly creating a Service in the parent, somehow attached to the Sidenav component and then injecting this service into the child??

推荐答案

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

The easiest and cleanest way is indeed to leverage a service.

服务的样子:

export class DomService {
    sidebarVisible: boolean = true;

    showSidebar() {
        sidebarVisible = true;
    }

    hideSidebar() {
        sidebarVisible = false;
    }

    toggleSidebar() {
        sidebarVisible = !sidebarVisible;
    }
}

在您的 bootstrap 调用中，将服务添加到提供者列表中:

In your bootstrap call add the service to the list of providers:

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

在要显示/隐藏侧边栏的组件(可能在 app.ts 中，也可能在您的 sidenav.ts 中)中，添加用于注入的服务:

In the components (maybe in app.ts but also in your sidenav.ts) where you want to show/hide the sidebar add the service for injection:

constructor(private _domService: DomService) {

}

在您的模板中，您现在可以切换/显示/隐藏的位置:

In your template, where you want to toggle/show/hide you can do now:

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

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

这篇关于从 *Routed* 子组件访问父@Component 和 vars的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！