Angular：mat-sidenav 在调整大小时忽略自动调整大小或模式

Posted 2023-02-18

【中文标题】Angular：mat-sidenav 在调整大小时忽略自动调整大小或模式

【英文标题】：Angular: mat-sidenav ignores autosize or mode on resize

【发布时间】：2020-02-05 00:53:31

【问题描述】：

我目前正在尝试将 mat-sidenav 实施到一个项目中。除了一种情况外，一切似乎都运行良好：如果我在浏览器中本地运行应用程序，然后将包含应用程序的窗口选项卡拉开并放开它（基本上是强制它调整大小很多次），这会导致它在新的单独的浏览器窗口中打开。当前页面看起来也不错，sidenav正如预期的那样在一边。

但是，当我导航到另一个页面时，该页面的内容会位于侧导航下方。我也尝试设置 autosize=true ，从某种意义上说，如果我导航出页面并返回，它会自行恢复到它应该看起来的样子，即左侧的 sidenav 和右侧显示的页面内容.

我也尝试过设置超时，然后强制打开和关闭侧导航，但这似乎无济于事。也许有办法强制刷新其他页面？侧导航代码是它自己的独立组件，如果这有助于阐明情况的话。粘贴代码的样子：

<mat-sidenav-container [class]="mobRes?'project1-sidenav mob-sidenav':'project1-sidenav desk-sidenav'" autosize="true">
        <mat-sidenav #sidenav [mode]="!mobRes?'side':'over'" fixedInViewport="false" [opened]="!mobRes" [disableClose]="!mobRes"> 

...

</mat-sidenav>
</mat-sidenav-container>

编辑：我在 resize 事件上运行了一些 console.logs，出于某种原因，经过几次尝试，它开始触发 3-6 个 resize 事件而不是 2 个，这正是导航栏开始与内容重叠的时候。在此之前它按预期工作（左侧的导航栏和右侧的内容）。另一个有趣的事情是，在 chrome 调试器中，当它工作时，console.logs 被组合在一起（只有一个实例出现在它旁边的数字），但是当它开始像上面提到的情况一样失败时，所有的即使消息完全相同，console.logs 也会出现在不同的行上。请注意，此时没有其他任何内容写入控制台。 抱歉，如果编辑没有帮助，但我想我会尽可能多地提供线索。如果我弄清楚了，我也会发布答案，以防其他人遇到这个问题。

Edit#2：当我离开当前页面时，此行为开始。因此，要复制它，启动应用程序，拉出标签并调整大小几次，然后离开页面（我通过单击侧导航栏上的链接来完成）并返回，并重复调整大小再次，这一次当您导航到另一个页面时，它将被覆盖，转到另一个页面并返回，它将自行重置到预期位置

【参考方案1】：

作为一种解决方法，我在组件 .ts 文件中的 resize 事件上添加了一个 toggle()。这有点刺耳，但它胜过被掩盖的内容。