如何将click事件应用于深层嵌套组件

Question

我有一个名为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.component.html：

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

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

        <site-menu></site-menu>

    </div>
</header>

menu.component.html：

<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 Toggle按钮在这个地方没有用。我读了很多将功能传递到我的菜单组件。我尝试使用@output和@input以及@viewChild。我的问题是我对JavaScript不太了解。一位朋友告诉我，我需要为此写一份服务。但我不知道我是怎么写的。

也许有人可以帮助我吗？我认为这将有助于其他人。