Angular 2 Material SideNav 始终在桌面上打开，在移动设备上正常

Question

我用angular 2材质制作了这个简单的侧面导航。我只想为台式机保留 oppened="true" 并保留手机和笔记本电脑的默认行为。这曾经存在于 Angular JS 材料中。我如何在 Angular 2 中实现这个？

<md-sidenav-container fullscreen>
  <md-sidenav #sideNav>
    <md-nav-list>
      <a>One</a>
      <a>Two</a>
    </md-nav-list>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon>menu</md-icon>

</button>
<span>Title</span>
  </md-toolbar>

  <h1>
    {{title}}
  </h1>
</md-sidenav-container>

Answer 1

@vinagreti 指出了非常有用的 angular/flex-layout 项目，它重新引入了一些曾经是 Angular Material 一部分的布局功能，但在 2+ 版本中被删除了。我已经在使用该库，因此很容易将它与来自 Angular Material 的 sidenav 结合使用来执行您在此处描述的操作：有一个 sidenav，它始终在大屏幕上打开，但在小屏幕上可切换。

您可以利用 sidenav 组件的 disableClose、mode 和 opens 属性来获取您想要的内容。

标记：

<md-sidenav #sidenav [ngClass.xs]="{'full-width': true}" [disableClose]="isSidenavCloseDisabled" [mode]="sidenavPosition" [opened]="isSidenavOpen">
...Contents of Sidenav go here....
</md-sidenav>

组件：

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from "rxjs/Subscription";
import { MediaChange, ObservableMedia } from "@angular/flex-layout";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  watcher: Subscription;
  sidenavPosition = 'side';
  isSidenavOpen = true;
  isSidenavCloseDisabled = true;

  constructor(media: ObservableMedia) {
    this.watcher = media.subscribe((change: MediaChange) => {
      if (change.mqAlias === 'xs') {
        this.sidenavPosition = 'over';
        this.isSidenavCloseDisabled = false;
      } else {
        this.isSidenavOpen = true;
        this.isSidenavCloseDisabled = true;
        this.sidenavPosition = 'side';
      }
    });
  }

  ngOnDestroy () {
    this.watcher.unsubscribe();
  }
}