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

2 回答

• 0

  默认情况下，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现在也被私有化了 .

  回复于 2024-05-05T14:17:33+08:00
• 0

  添加 autosize 属性应该可以解决您的问题 . 虽然这似乎会对性能产生影响 .

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

  回复于 2024-05-05T14:17:33+08:00