Angular 如何将单击事件应用于嵌套较深的组件

我有一个名为frame.component.html的文件：

<md-sidenav-container>
    <md-sidenav #sidenav align="end">Jolly good!</md-sidenav>

    <site-header></site-header>

    <div class="site-content">
        <router-outlet></router-outlet>
    </div>

    <site-footer></site-footer>
</md-sidenav-container>

<header>
    <div class="header-inner">

        <h1 class="logo">MyWeb<span>Exile</span></h1>

        <site-menu></site-menu>

    </div>
</header>

<div class="menu">

    <ul>
        <li><a [routerLink]="['/home']" [routerLinkActive]="['active']">Home</a></li>
        <li><a [routerLink]="['/blog']" [routerLinkActive]="['active']">Blog</a></li>
        <li><a [routerLink]="['/contact']" [routerLinkActive]="['active']">Contact</a></li>
    </ul>

    <ng2e-dropdown addClass="search">
        <i class="material-icons">search</i>
        <div class="content">
            <searchbar-small></searchbar-small>
        </div>
    </ng2e-dropdown>

    <button md-button (click)="sidenav.open()">
        <md-icon svgIcon="menu"></md-icon>
    </button>

</div>

太好了！

在这个文件中，我加载了页眉、网站内容和页脚

site-header.component.html：

<md-sidenav-container>
    <md-sidenav #sidenav align="end">Jolly good!</md-sidenav>

    <site-header></site-header>

    <div class="site-content">
        <router-outlet></router-outlet>
    </div>

    <site-footer></site-footer>
</md-sidenav-container>

<header>
    <div class="header-inner">

        <h1 class="logo">MyWeb<span>Exile</span></h1>

        <site-menu></site-menu>

    </div>
</header>

<div class="menu">

    <ul>
        <li><a [routerLink]="['/home']" [routerLinkActive]="['active']">Home</a></li>
        <li><a [routerLink]="['/blog']" [routerLinkActive]="['active']">Blog</a></li>
        <li><a [routerLink]="['/contact']" [routerLinkActive]="['active']">Contact</a></li>
    </ul>

    <ng2e-dropdown addClass="search">
        <i class="material-icons">search</i>
        <div class="content">
            <searchbar-small></searchbar-small>
        </div>
    </ng2e-dropdown>

    <button md-button (click)="sidenav.open()">
        <md-icon svgIcon="menu"></md-icon>
    </button>

</div>

我的网络放逐

menu.component.html：

<md-sidenav-container>
    <md-sidenav #sidenav align="end">Jolly good!</md-sidenav>

    <site-header></site-header>

    <div class="site-content">
        <router-outlet></router-outlet>
    </div>

    <site-footer></site-footer>
</md-sidenav-container>

<header>
    <div class="header-inner">

        <h1 class="logo">MyWeb<span>Exile</span></h1>

        <site-menu></site-menu>

    </div>
</header>

<div class="menu">

    <ul>
        <li><a [routerLink]="['/home']" [routerLinkActive]="['active']">Home</a></li>
        <li><a [routerLink]="['/blog']" [routerLinkActive]="['active']">Blog</a></li>
        <li><a [routerLink]="['/contact']" [routerLinkActive]="['active']">Contact</a></li>
    </ul>

    <ng2e-dropdown addClass="search">
        <i class="material-icons">search</i>
        <div class="content">
            <searchbar-small></searchbar-small>
        </div>
    </ng2e-dropdown>

    <button md-button (click)="sidenav.open()">
        <md-icon svgIcon="menu"></md-icon>
    </button>

</div>

家
博客
接触

搜索

Sidenav切换按钮在这个地方不起作用。我读了很多将功能传递到菜单组件的文章。我尝试使用@output和@input以及@viewChild。我的问题是我对JavaScript知之甚少。一位朋友告诉我，我需要为此编写一个服务。但我不知道我是怎么写的

---

也许有人能帮我？我认为这将有助于很多其他人。

是的，您应该研究一种服务，它可以帮助组件之间进行通信，而不依赖父子绑定。不过，别指望有人为你写一封信。试着回答一个更具体的问题。谢谢！你能和我分享一下谁做的服务吗？Angular cookbook提供了管理组件交互的服务示例，他们谈到“父级和子级通过服务进行通信”，但我想要一个使功能全球可用的服务。这样做是否可能？您创建了从父组件调用的服务。然后，子组件侦听事件，即订阅服务中的某个函数。当父函数将值传递给该函数时，子函数将检索该值。