角材料-Sidenav组件无法正常工作

Question

我正在为不同的设备开发Web应用程序：台式机，平板电脑，手机。 我将sidenav和mediaquery（import {MediaMatcher} from '@ angular / cdk / layout';）结合在一起用于设备大小检测。

当我加载手机大小的应用程序时，sidenav打开，但是当我更改设备大小并返回手机大小时，sidenav无法打开。

我该如何解决问题？

错误应用的链接：Editor link

Answer 1

您可以使用Host Listener来监听窗口调整大小事件，并在应用程序中进行以下更改。

@HostListener('window:resize', ['$event'])
onResize(event) {
 event.target.innerWidth < 400 ? this.sideNavButtonVisible = true :  this.sideNavButtonVisible = false;
}