angular - Material Angular sidenav触发器调整大小

Question

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

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

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

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

也许我可以通过打开和关闭 sidenav 来触发它。有没有触发resize的函数？

在我看到的文档中

@Input() autosize: boolean Whether to automatically resize the container whenever the size of any of its drawers changes. Use at your own risk! Enabling this option can cause layout thrashing by measuring the drawers on every change detection cycle. Can be configured globally via the MAT_DRAWER_DEFAULT_AUTOSIZE token.

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

注意:

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">