angular - 当滚动条可见时，带有子菜单的 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 或 nav 模式更改时调整容器的大小。您要么必须自己触发容器的大小调整，要么可以使用内置选项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并更正容器的边距。

您可以使用 aViewChild并访问 MatSidenavContainer 并在您的toggleMenu. 但由于_updateContentMargins函数本身是私有的，我不会使用它。就个人而言，我想不出另一种方法来做到这一点。

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

我在setTimeout这里使用 MatSidenavContainer 的 _ngZone 现在也被私有化了。