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

Question

How to call left sidenav from a header toolbar component?

header-toolbar.component.ts

import {Component, ViewChild} from "@angular/core";

@Component({
    selector: 'header-toolbar',
    templateUrl: './app/header-toolbar/header-toolbar.component.html',
})

export class HeaderToolbarComponent{ }

header-toolbar.component.html

<md-sidenav-layout>
    <left-sidenav #s [sidenavFromLeftSideComponent]="s"></left-sidenav>
    <md-sidenav-layout>
        <md-toolbar color="primary">
            <button md-icon-button (click)="s.toggle()">
                <i class="material-icons">menu</i>
            </button>
            &nbsp;
            <span>Project name</span>
        </md-toolbar>
    </md-sidenav-layout>
</md-sidenav-layout>

left-sidenav.component.ts

import {Component, Input} from "@angular/core";

@Component({
    selector: 'left-sidenav',
    templateUrl: './app/left-sidenav/left-sidenav.component.html'
})

export class LeftSidenavComponent{
    @Input() sidenavFromLeftSideComponent: any;
}

left-sidenav.component.html

<md-sidenav #sidenav>
    <button md-button (click)="sidenav.close()">Close</button>
</md-sidenav>

Thanks.

PS I'm new in angular.

Answer 1

A layout example for you, you could use template variable combine with Input to do this.

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>

header.component.ts

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

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

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

header.component.html

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

now you could click menu button in header to toggle sidenav.