Angular Material 带有子菜单的 sidenav 在滚动条可见时无法正确推送

Question

我正在使用 Angular Material sidenav，我的菜单有一个子菜单。当我打开子菜单时，会出现一个滚动条，使 sidenav 稍大一些，它覆盖了一些主要内容。

查看此 Stackblitz https://stackblitz.com/edit/angular-raedvz，展开子菜单，您将看到行为。

Answer 1

添加 autosize 属性应该可以解决您的问题。尽管这似乎对性能有影响。

看看这个 github 问题：https://github.com/angular/material2/issues/9601

Answer 2

默认情况下，Angular Material 只会在 nav.open、window.resize 或导航模式更改时调整容器的大小。您要么必须自己触发容器的大小调整，要么可以使用内置选项 autosize。但是他们告诉您使用它需要您自担风险，因为它可能会导致性能问题。

<mat-sidenav-container class="example-container" *ngIf="shouldRun" autosize> stackblitz 示例：https://angular-wsvjf8.stackblitz.io

我在您提供的示例中进行了测试，它确实对我有用。如果您遇到性能问题导致您的应用程序做的不仅仅是示例（显然），您可能必须在 toggleMenu 方法上自行触发调整大小。

https://material.angular.io/components/sidenav/overview#resizing-an-open-sidenav

---

更新您的评论：

我不确定这是否正确。根据我在 autosize 选项的代码中可以找到的内容。他们所做的是在每个更改检测周期检查边距，这就是为什么使用 autosize 选项可能会导致性能问题。 之后，他们调用私有函数 _updateContentMargins 并更正容器的边距。

您可以使用 ViewChild 并访问 MatSidenavContainer 并在您的 toggleMenu 中调用该函数。但是由于 _updateContentMargins 函数本身是私有的，所以我不会使用它。 我个人想不出其他方法。

这是在您的 toggleMenu 中调用 _updateContentMargins 的工作示例：https://stackblitz.com/edit/angular-segnwt

我在这里使用 setTimeout 因为 MatSidenavContainer 的 _ngZone 现在也被设为私有。