angular - Material 2 : Show/Hide md-sidenav depending on media

Question

我想在大屏幕上打开 md-sidenav 并在移动设备上关闭它。在我的应用程序中执行此操作的正确方法是什么？

是否有可能在 angular2 组件中查询媒体？

Answer 1

在组件类内部，我定义了对 sidenav 的引用并监听窗口调整大小事件。根据 window.innerWith，您可以构建自己的逻辑。

  @ViewChild('sidenav') sidenav: MdSidenav

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.configureSideNav()
  }

  configureSideNav() {
    this.smallScreen = window.innerWidth < 501 ? true : false
    if (!this.smallScreen) {
      this.sidenav.mode = "side"
      this.sidenav.opened = true
    } else {
      this.sidenav.mode = 'over'
      this.sidenav.opened = false
    }
  }