材料角度sidenav触发调整大小

Question

我使用的是Angular 8和material主题。以下是 https:/material.angular.iocomponentssidenavoverview。

我在里面生成的内容 <mat-sidenav> </mat-sidenav> 由用户输入动态调整。

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

当我把sidenav里面的内容改成更长的内容时，它没有调整大小。

也许我可以通过打开和关闭sidenav来触发它，有什么功能可以触发调整大小吗？

在文档中我看到

@Input() autosize: 布林 是否在容器的任何抽屉的大小改变时自动调整其大小。在 自担风险! 启用该选项会在每个变化检测周期测量抽屉，从而导致布局混乱。可以通过 MAT_DRAWER_DEFAULT_AUTOSIZE 标记进行全局配置。

我不想使用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">