切换 md-sidenav 模式 (Angular Material 2)

Question

我有兴趣将 md-sidenav - 从 Angular Material 2 - 模式从侧面（对于桌面）更改为上方（移动）。有没有办法以编程方式更改它？谢谢

Answer 1

好的！您可以在组件中进行屏幕宽度测试（或浏览器检测、blech）on initialization，并将结果作为字符串存储在变量中。

以宽度检测为例，你可能会这样做：

部分app.component.ts

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  @ViewChild('wrapper') 
  private wrapperElement: ElementRef;

  private menuMode; // Where we'll store the resulting menu mode

  ngOnInit() {
    // Do your simple test on the container, for example
    if (this.wrapperElement.nativeElement.offsetWidth <= 720) {
        this.menuMode = "over";
    } else {
        this.menuMode = "side";
    }
  }
}

并将变量绑定到模板中的sidenav。

部分app.component.html

<div #wrapper>
    <md-sidenav-container>
        <md-sidenav #sidenav [mode]="menuMode"></md-sidenav>
        ...
</div>

大部分工作只是确定您要如何执行测试。

您也可以只测试 window 而不是包装器，但我更喜欢测试包装器。

备注：

这是未经测试的代码。
这只会在组件初始化时触发，如果你还想要处理用户调整浏览器大小和菜单模式改变的情况，您需要做一些更多的事情喜欢使用 HostListener @HostListener("window:resize", ["$event"])，但这超出了你原来的范围问题。

Answer 2

基于 Steve G 的解决方案，您可以更新 app.component.html

<md-sidenav [mode]="isLargeScreen() ? 'side' : 'over'" [opened]="isLargeScreen()"></md-sidenav>

然后在app.component.ts

isLargeScreen() {
  const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (width > 720) {
      return true;
  } else {
      return false;
  }
}

这会在桌面上为您提供默认打开的边栏，在移动设备上它会覆盖但默认隐藏！

Answer 3

我通过 ObservableMedia 找到了解决方案。

组件：

import {Component, OnInit, ViewEncapsulation} from "@angular/core";
import {ObservableMedia} from "@angular/flex-layout";

@Component({
  moduleId: module.id,
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class SidebarComponent implements OnInit {

  constructor(public media:ObservableMedia ) {
  }

  ngOnInit(): void {
  }

}

模板：

<md-sidenav-container>
    <md-sidenav #sidenav  mode="{{media.isActive('gt-sm') ? 'side' : 'over'}}" align="begin" class="md-whiteframe-4dp" opened >
      <md-nav-list>
        ...
      </md-nav-list>
    </md-sidenav>

</md-sidenav-container>

切换 md-sidenav 模式 (Angular Material 2)

Switch md-sidenav mode (Angular Material 2)

angular

menu

angular-material2