检查material2 sidenav是否打开

Question

有没有办法检查 sidenav 元素是否打开？根据 API 文档，有一个 isOpen? 参数，但在我的例子中它抛出一个异常：EXCEPTION: Error in ./AppComponent class AppComponent - inline template:2:2 caused by: this.sidenav.isOpen is not a function

import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  template: `
  <md-sidenav #sidenav mode="side" class="app-sidenav">
      Sidenav
  </md-sidenav>
  `,
  styleUrls: ['./sidebar.component.css'],
  host: {
      '(document:click)': 'onClick($event)',
  }
})
export class SidebarComponent implements OnInit {

  constructor(private sidenav: ElementRef) { }

  ngOnInit() {
  }

  onClick() {
     if (this.sidenav.isOpen()) {
         this.sidenav.close();
     }
  }

}

Answer 1

您必须使用 ViewChild 才能控制 sidenav

@ViewChild('sidenav') sidenav: any;
opened: any = false;
onClick() {
   console.log(this.sidenav.opened);
}

Plunkr

Answer 2

你对文档的理解有误，isOpen？是toggle函数的可选参数。

您可以改为查看属性。这对我有用：

@ViewChild('sidenav') sidenav: MatSidenav;
onClick() {
  console.log(`isOpen: ${this.sidenav.opened}`);
}

检查material2 sidenav是否打开

Check if material2 sidenav is open

angular

material-design

angular-material

angular-material2