从angular-material2

Question

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

头-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。