從angular-material2中的工具欄組件中調用sidenav組件

Question

如何從標題工具欄組件中調用left sideav？

首標toolbar.component.ts

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

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

export class HeaderToolbarComponent{ } 

首標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> 

左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; 
} 

左sidenav.component.html

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

感謝。

P.S.我是新角色。

Answer 1

這是一個佈局示例，您可以使用模板變量結合Input來執行此操作。

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> 

現在

，你可以在頭點擊menu按鈕，切換sidenav。