力角材料sidenav重绘

Question

我的页面上有两个Angular Material sidenavs。但是网站的CSS包含@media查询

@media (max-width: 1440px) {
    mat-sidenav {
        width: 300px;
    }
}

因此，当屏幕宽度变化而无需重新加载页面时，我观察到内容和sidenav之间有一个边距，因为sidenav宽度变小了：

我应该能够使用MediaMatcher检测到更改：

import {MediaMatcher} from '@angular/cdk/layout';

但是如何触发角度分量中的sidenav重绘？

Answer 1

我使用ngx-translate以用户选择的语言提供菜单项标签。由于更改语言会影响sidenav中内容的宽度，因此导致sidenav与主要内容重叠。我通过添加sidenav autosizing来解决此问题。请注意，它带有自担风险警告。我选择接受风险是因为我在自己的测试中没有找到替代的可行解决方案，也没有发现任何问题。

  

自动调整大小>

我也尝试过

• 通过导航到同一路由来强制重新加载页面；变得复杂，因为默认情况下导航到相同的路线不会执行任何操作
• 两次切换sidenav；快速打开和关闭，从而强制重新计算。