Sidenav 模式 'over' vs 'side' in Material 2 with angular 4

Question

我希望 sidenav 的模式根据屏幕尺寸在 over 和 side 之间切换。

我找到了下面的示例，但是 material 似乎不推荐使用组件媒体。最佳做法是什么？

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

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

Answer 1

还有更简单的：

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

在你的组件中

myMode = 'side';

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

Answer 2

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

Sidenav 模式 'over' vs 'side' in Material 2 with angular 4

Sidenav mode 'over' vs 'side' in Material 2 with angular 4

angular-material2

angular