从angular-material2中的工具栏组件调用sidenav组件

如何从标题工具栏组件调用left sidenav

标题工具栏.component.ts

标题工具栏.component.html

左侧导航组件.html

接近

谢谢

---

另外，我是角度方面的新手。

作为一个布局示例，您可以使用模板变量结合

输入来完成此操作

app.component.html

<md-sidenav-layout>
  <header-bar [leftnav]=left [rightnav]=right></header-bar>

  <breadcrumbs></breadcrumbs>

  <md-sidenav #left mode="over">
    <left-side-nav [leftnav]=left></left-side-nav>
  </md-sidenav>

  <md-sidenav #right align="end" mode="side">
    <right-side-nav [rightnav]=right></right-side-nav>
  </md-sidenav>  

  <router-outlet></router-outlet>

</md-sidenav-layout>
<footer-bar></footer-bar>

<md-toolbar>
    <button md-icon-button (click)="leftnav.toggle()"> 
      <md-icon>menu</md-icon>
    </button>
</md-toolbar>

header.component.html

<md-sidenav-layout>
  <header-bar [leftnav]=left [rightnav]=right></header-bar>

  <breadcrumbs></breadcrumbs>

  <md-sidenav #left mode="over">
    <left-side-nav [leftnav]=left></left-side-nav>
  </md-sidenav>

  <md-sidenav #right align="end" mode="side">
    <right-side-nav [rightnav]=right></right-side-nav>
  </md-sidenav>  

  <router-outlet></router-outlet>

</md-sidenav-layout>
<footer-bar></footer-bar>

<md-toolbar>
    <button md-icon-button (click)="leftnav.toggle()"> 
      <md-icon>menu</md-icon>
    </button>
</md-toolbar>


菜单

现在您可以单击标题中的
菜单
按钮来切换sidenav

<md-sidenav-layout>
  <header-bar [leftnav]=left [rightnav]=right></header-bar>

  <breadcrumbs></breadcrumbs>

  <md-sidenav #left mode="over">
    <left-side-nav [leftnav]=left></left-side-nav>
  </md-sidenav>

  <md-sidenav #right align="end" mode="side">
    <right-side-nav [rightnav]=right></right-side-nav>
  </md-sidenav>  

  <router-outlet></router-outlet>

</md-sidenav-layout>
<footer-bar></footer-bar>

import { Component } from '@angular/core';

@Component({
  selector: 'header-bar',
  styleUrls: ['header.component.css'],
  templateUrl: 'header.component.html'
})

export class HeaderComponent {
    @Input() leftnav;
    @Input() rightnav;
}

<md-toolbar>
    <button md-icon-button (click)="leftnav.toggle()"> 
      <md-icon>menu</md-icon>
    </button>
</md-toolbar>