Question

我希望sidenav的模式能够在over和side之间进行设置，具体取决于屏幕尺寸。

我在下面找到了示例，但组件媒体似乎已被弃用。什么是最佳做法？

constructor(public sidenav: SidenavService,
            public media: Media) {
}

hasMedia(breakSize: string): boolean {
    return this.media.hasMedia(breakSize);
}

Answer 1

我通过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>

Answer 2

更容易：

<md-sidenav-container>
    <md-sidenav #sidenav [mode]="myMode" opened="true">
    <!-- Your content + close the tags -->

在您的组件

中

myMode = 'side';

现在您要做的就是获取文档宽度并选择何时更改模式。

Sidenav模式'over'与'side'在Material 2中，角度为4

2 个答案: