Material2:根据媒体显示/隐藏md-sidenav

Question

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

有没有可能在angular2组件内查询媒体？

Answer 1

在组件类中,我定义了对sidenav的引用并监听窗口大小调整事件.取决于window.inner,您可以构建您的逻辑.

  @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
    }
  }

Answer 2

我刚刚发现了一种更好的方法来收听Angular中的屏幕更改：https : //github.com/angular/flex-layout/wiki/ObservableMedia

它是一个Angular Flex Layout模块，可提供mediaQuery激活通知（可观察到）。因此，无需resize监听即可手动创建监听器。

此外，MediaChange类提供了方便的别名（lg，md，xs等），可以用来做关于屏幕大小，具体表现决定。

在其Wiki页面上查看示例。