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

Question

我用 angular 2 材质制作了这个简单的侧导航。 我只想为台式机保留 opopened="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和open属性来得到你想要的。

标记：

<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();
  }
}

Answer 2

在为这篇类似的帖子苦苦挣扎之后，我使用了我在 https://github.com/angular/material2/issues/1130 找到的似乎有点黑客的东西，我已经把它放在了 this plunker。

此解决方案的关键是它会在打开和调整大小事件时检查媒体大小，根据可用宽度显示/隐藏侧导航面板。这归功于sikemullivan

ngOnInit() {
    window.onresize = (e) => {
      this.checkMenu();
    };
    this.checkMenu();
  }

  checkMenu() {
    this._ngZone.run(() => {
      var w = window.innerWidth;
      if (w > 450) {
        this.start.open();
      } else {
        this.start.close();
      }
    });
  }

我称其为 hack，因为通过调整大小事件处理程序来处理这个问题就像拿出一把大锤来解决问题。我认为有一些更容易的东西，但我自己找不到更容易的东西。

上述问题的另一个问题是，如果您像我一样，也许您想要保持打开的东西，那么您需要回复Prevent md-sidenav from being closed using Escape key when opened

Answer 3

您应该使用 disableClose 属性，如下所示

 w = window.innerWidth;
      constructor(){
        if (this.w > 450) {
        this.disableClose=true;
      } else {
        this.disableClose=false;
      }

HTML 将是

<md-sidenav-container class="container-fluid" >
  <div class="col-md-1">
    <button md-button (click)="sidenav.open()">
      <i class="fa fa-list"></i>
    </button>
  </div>
  <div class="col-md-11">
    Main content goes here
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <md-sidenav #sidenav class="example-sidenav" [disableClose]="disableClose">
<!---------------------------above line-------------------------------->
   Manu bar
  </md-sidenav>

LIVE DEMO