Question

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

Answer 1

基于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 2

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

以宽度检测为例，您可以执行以下操作：

部分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>

大部分工作只是确定你想要如何进行测试。

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

注意：

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

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）

3 个答案: