角材料 - sidenav 組件無法正常工作

Question

我正在為不同的設備開發一個網絡應用程序：台式機、平板電腦、手機。 我結合了 sidenav 和 mediaquery（ import {MediaMatcher} from '@ angular / cdk / layout'; ）用於設備大小檢測。

當我加載具有手機尺寸的應用程序時，sidenav 會打開，但是當我更改設備尺寸並返回手機尺寸時，sidenav 不會打開。

我該如何解決問題？

被竊聽的應用程序的鏈接：編輯器鏈接

Answer 1

您可以使用Host Listener來監聽窗口大小調整事件並在您的應用程序中進行以下更改。

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