Angular 2 + Material 2 工具栏嵌套 Sidenav - 如何在 Sidenav 外调用切换按钮

Question

我嵌套了 SidenavComponent 和 ToolbarComponent

我想在 ToolbarComponent 内的 SidenavComponent 之外调用 sidenav.toggle()

sidenav.component.html

 <md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" color="primary">
     <md-toolbar color="primary"><span>Sidenav</span></md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">HOME</button>
      </md-sidenav>

      <app-toolbar></app-toolbar>

    </md-sidenav-container>

sidenav.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css']
})
export class SidenavComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

toolbar.component.html

<md-toolbar color="primary">
  <button md-button class="toolbar-menu-button"
          (click)="sidenav.toggle()" (click)="isCollapsed = !isCollapsed">
    <md-icon [@iconChange]="isCollapsed">menu</md-icon>
  </button>
  <span class="toolbar-spacer"></span>
  <button md-button class="toolbar-link" >HOME</button>
  <span class="toolbar-spacer"></span>
</md-toolbar>

toolbar.component.ts

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
import {SidenavComponent} from '../sidenav/sidenav.component';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css'],
  animations: [
    trigger('iconChange', [
      state('true',
        style({ transform: 'rotate( -90deg )' })
      ),
      state('false',
        style({ transform: 'rotate( 0deg )' })
      ),
      transition('* => *', animate('.25s'))
    ])
  ]
})
export class ToolbarComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

}

如何在工具栏中调用 sidenav.toggle()？

Answer 1

如果从模板中删除逻辑，则保留它 MVC。

使用 ViewChild 引用 sidenav：

Class:

import { ViewChild } from '@angular/core';
....
@ViewChild('sidenav') private sidenav;
...
onClick(){
 this.sidenav.toggle();
 this.collapsed=!this.collapsed;
 //any other action
}

HTML:

 <button md-button class="toolbar-menu-button" (click)="onClick()">

Answer 2

将引用 #sidenav 作为 Input 传递给您的 app-toolbar 组件。

toolbar.component.ts:

export class ToolbarComponent implements OnInit {

  @Input() sidenav;

}

sidenav.component.html:

<app-toolbar [sidenav]="sidenav"></app-toolbar>

Plunker demo

此外，我建议更改

(click)="sidenav.toggle()" (click)="isCollapsed = !isCollapsed"

到

(click)="sidenav.toggle(); isCollapsed = !isCollapsed"

您不需要为每个

单独的click事件

Angular 2 + Material 2 工具栏嵌套 Sidenav - 如何在 Sidenav 外调用切换按钮

Angular 2 + Material 2 Toolbar nested Sidenav - How Call toggle button outside Sidenav

parent-child

angular-material2

angular