Angular 侧导航模式'；超过'；vs'；侧面'；在材质2中，角度为4

我希望

sidenav

的模式根据屏幕大小在

over

和

side

之间切换

我发现下面的例子，但组件媒体似乎是不推荐的材料。什么是最佳实践

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

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

更简单的是：

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

---

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

我通过ObservaleMedia找到了解决方案，但代码可能更好：

组成部分：

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>

...

我知道，但是屏幕大小呢？在Google man上10秒<代码>let width=document.body.clientWidth<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>