我目前正在尝试将mat-sidenav实现到项目中。除了一种情况外，一切似乎都运行良好：如果我在浏览器中本地运行应用程序，然后拉开包含该应用程序的窗口选项卡并让它离开(基本上迫使它调整大小很多次(，这会导致它在一个新的单独的浏览器窗口中打开。当前页面看起来也不错，侧导航按预期在侧面。
但是，当我导航到另一个页面时，该页面的内容位于侧边导航下方。我也尝试设置 autosize=true，这很有帮助，如果我导航出页面并返回，它会将自身恢复到它应该的样子，即左侧的侧导航和右侧显示的页面内容。
我也尝试设置超时，然后强制打开和关闭侧导航，但这似乎没有任何帮助。也许有办法强制刷新其他页面？侧导航代码是它自己的独立组件，如果这有助于阐明情况。粘贴代码的外观：
<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>
编辑：我在调整大小事件上运行了一些console.logs，由于某种原因，经过几次尝试，它开始触发3-6个调整大小事件而不是2个，这正是导航栏开始与内容重叠的时候。在此之前，它按预期工作(左侧导航栏和右侧内容(。另一个有趣的事情是，在chrome调试器中，当它工作时，console.logs被分组在一起(只有一个实例出现，旁边有数字(，但是当它像上面提到的情况一样开始失败时，所有console.logs都出现在不同的行上，即使消息完全相同。请注意，此时没有其他内容正在写入控制台。 抱歉，如果编辑没有帮助，但我想我会在探索这个问题时提供尽可能多的线索。如果我弄清楚了，我也会发布答案，以防其他人遇到这种情况。
编辑#2：当我离开当前页面时，此行为开始。因此，要重现它，请启动应用程序，拉出选项卡并调整大小几次，然后离开页面(我通过单击侧面导航栏上的链接来完成(并返回，然后再次重复调整大小，这次当您导航到另一个页面时，它将被覆盖， 转到另一个页面并返回，它将自行重置为预期位置
作为一种解决方法，我在组件 .ts 文件中的 resize 事件上添加了一个 toggle((。这有点不和谐，但它击败了被掩盖的内容。