material angular sidenav 触发器调整大小

Question

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

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

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

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

也许我可以通过打开和关闭 sidenav 来触发它。是否有触发调整大小的功能？

在我看到的文档中

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

material angular sidenav 触发器调整大小

material angular sidenav trigger resize

angular

angular-material

material-design

angular9