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

Question

我正在为不同的设备开发一个网络应用程序：台式机、平板电脑、手机。 我已经结合 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;
}