Html 在两个单独的角度2组件模板中切换“材质设计2导航”菜单

我正在使用材质设计2切换左侧导航：

在标题栏模板中：

<button md-icon-button (click)="leftNav.toggle()" aria-label="Menu">
        <md-icon>menu</md-icon>
 </button>

 <md-sidenav mode="side" fxFlex="200px" #leftNav md-component-id="leftNav" opened></md-sidenav>

我见过一些一般的例子，但在这里我什么都不能应用。如果需要，很乐意提供更多信息。谢谢

以下是将html分为两个组件之前的步骤：

<div fxLayout="column">
    <!-- Header bar -->
    <!--<header-bar></header-bar>-->
 <md-toolbar color="accent" class="navbar">
          <button md-icon-button (click)="leftNav.toggle()" aria-label="Menu">
               <md-icon>menu</md-icon>
           </button>
          <span fxFlex></span>

          <button md-button [md-menu-trigger-for]="menu">
             My Account <md-icon>keyboard_arrow_down</md-icon>
          </button>
 </md-toolbar>

 <md-sidenav-container fxLayout="row">
   <md-sidenav mode="side" fxFlex="200px" #leftNav md-component-id="leftNav" opened>
    <md-nav-list>
    <md-list-item [routerLink]=" ['./dashboard'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <md-icon>gradient</md-icon>
      <span class="padding-lr-2x">Dashboard</span>
     </md-list-item>
     <md-list-item [routerLink]=" ['./front'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <md-icon>assignment</md-icon>
      <span class="padding-lr-2x">Form layout</span>
     </md-list-item>
     <md-list-item [routerLink]=" ['./alt'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <md-icon>settings</md-icon>
       <span class="padding-lr-2x">Settings</span>
     </md-list-item>
   </md-nav-list>
 </md-sidenav>
 </md-sidenav-container>
</div>

菜单
我的帐户键盘箭头向下
坡度
仪表板
分配
表单布局
设置
设置

在创建这两个组件之前，您可以发布您正在使用的html吗？很抱歉，必须运行，但我认为您基本上需要在

左导航上创建一个@Output参数，该参数调用其内部包含的
侧导航
打开template@cgatian..No问题我继续说，并在上面补充了这一点。关于第二条评论，单击来自标题栏组件。我不确定我会不会跟着你
 layout:
     header-bar:
         header-bar.html
         header-bar.ts
     left-nav:
         left-nav.html
         left-nav.ts

<div fxLayout="column">
    <!-- Header bar -->
    <!--<header-bar></header-bar>-->
 <md-toolbar color="accent" class="navbar">
          <button md-icon-button (click)="leftNav.toggle()" aria-label="Menu">
               <md-icon>menu</md-icon>
           </button>
          <span fxFlex></span>

          <button md-button [md-menu-trigger-for]="menu">
             My Account <md-icon>keyboard_arrow_down</md-icon>
          </button>
 </md-toolbar>

 <md-sidenav-container fxLayout="row">
   <md-sidenav mode="side" fxFlex="200px" #leftNav md-component-id="leftNav" opened>
    <md-nav-list>
    <md-list-item [routerLink]=" ['./dashboard'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <md-icon>gradient</md-icon>
      <span class="padding-lr-2x">Dashboard</span>
     </md-list-item>
     <md-list-item [routerLink]=" ['./front'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <md-icon>assignment</md-icon>
      <span class="padding-lr-2x">Form layout</span>
     </md-list-item>
     <md-list-item [routerLink]=" ['./alt'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <md-icon>settings</md-icon>
       <span class="padding-lr-2x">Settings</span>
     </md-list-item>
   </md-nav-list>
 </md-sidenav>
 </md-sidenav-container>
</div>