Question

我用角度2材料制作了这个简单的侧面导航。我想保持oppened =＆＃34; true＆＃34;仅适用于桌面并保留移动设备和笔记本电脑的默认行为。这曾经存在于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 Material一部分的一些布局功能，但在版本2+中删除了。我已经在使用该库了，所以很容易将它与Angular Material的sidenav一起使用来完成你在这里描述的内容：有一个sidenav总是在大屏幕上打开，但可以在较小的屏幕上切换。

您可以使用sidenav组件的disableClose，mode和opened属性来获得您想要的内容。

标记：

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

我称之为黑客攻击，因为通过调整大小事件处理程序处理这个问题似乎就是拿出一把大锤来解决问题。我认为有更容易的东西，但我自己找不到更容易的东西。

上述问题的另一个问题是，如果你喜欢我，也许你喜欢保持打开的东西，那么你需要回答{ {3}}

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

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

3 个答案: