具有屏幕检测功能的响应式侧导航

Question

我正在用材料库进行一个有角度的项目，我面临着一个问题，我需要实现一个打开sidenav的方法，即默认情况下使用mode="侧"；，但对于较小的设备，我需要坚持模式="；"过"；，我看到了一些关于棱角材料的想法2，但我相信它已经不起作用了，因为标签和进口已经不可用了。

sidebar.component.html

<mat-sidenav-container class="sidebar-sidenav-container">
<mat-sidenav #snav mode="side" fixedTopGap="56" opened="false">
<app-side-navbar></app-side-navbar>
</mat-sidenav>
<mat-sidenav-content class="router-container">
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

我试图在版本2中用角材料实现一些旧功能，但有些标签和功能已经不起作用了

Answer 1

您可以使用Media Observer获取当前设备的屏幕大小。

isSmallDevice(): boolean { 
return this.mediaObserver.isActive('xs') || 
this.mediaObserver.isActive('sm');
}

然后，您可以使用它在模板中的不同模式之间切换：

<mat-sidenav #snav [mode]="isSmallDevice() ? 'over' : 'side'" fixedTopGap="56" opened="false">
<app-side-navbar></app-side-navbar>
</mat-sidenav>

Answer 2

这是我解决问题的方法。

代码html=

<mat-sidenav-container class="sidebar-sidenav-container">
<mat-sidenav #snav [mode]="modo" fixedTopGap="56" opened="false">
<app-side-navbar></app-side-navbar>
</mat-sidenav>
<mat-sidenav-content class="router-container">
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container> 

ts类=

modo: any = "side";
//opened: any = "false";
updateModo() {
(window.innerWidth <= 850) ? this.modo = "over" : this.modo = "side";
}