材料角度sidenav触发器调整大小

Question

我正在使用 Angular 8 和材质主题。关注https://material.angular.io/components/sidenav/overview

我正在通过用户输入动态生成<mat-sidenav> </mat-sidenav> 中的内容。

当我切换状态时，它会自动调整内容的大小。比如我第一次打开的时候是这样的。

当我将 sidenav 中的内容更改为更长的内容时，它不会调整大小。

也许我可以通过打开和关闭 sidenav 来触发它。有触发resize的功能吗？

在我看到的文档中

@输入() 自动调整大小：布尔值 是否在任何抽屉的大小发生变化时自动调整容器的大小。 风险自负！启用此选项可能会通过在每个更改检测周期测量抽屉来导致布局抖动。可以通过 MAT_DRAWER_DEFAULT_AUTOSIZE 令牌全局配置。

我不想使用自动调整大小。

注意：

setTimeout(() => this.isOpen = false, 0);
setTimeout(() => this.isOpen = true, 1);

在专注于菜单按钮时效果很好。

Answer 1

诀窍是当您知道要更改 sidenav 的大小时将 autosize 设置为 true，并在调整大小完成后将其关闭。

autosize: boolean = false;

doSomethingToChangeSidenavWidth() {
  // do something...
  // ...then
  this.autosize = true;
  setTimeout(() => this.autosize = false, 1);
}

<mat-sidenav-container class="example-container" [(autosize)]="autosize">