angular - 角材质sidenav动态高度

Question

我正在使用：Angular 9.1.4 和 Angular/Material 9.2.4

对于我目前正在做的一个项目，需要在材质侧导航中创建动态组件。

https://material.angular.io/components/sidenav/overview

我已经全部设置好了，它确实可以工作，除了新的请求，即如果动态组件高度例如为 400 像素，材质侧导航不会扩展到底部，而是在组件的高度处切断。

有谁知道这样做的干净方法？如果不是，它也可能与 CSS 技巧有关。

这是一个 stackblitz 示例 https://stackblitz.com/angular/kknqvrklpgx?file=src%2Fapp%2Fsidenav-autosize-example.ts

Answer 1

创建一个描述 sidenav 核心的类，并创建其他 2 个描述导航栏状态的类。当您进行额外扩展时，只需根据您的显示填充状态更改导航栏上应用的类状态。

  <mat-drawer #drawer class="example" [ngClass]="{'example-cropped': showFiller, 'example-full': !showFiller}"  mode="side">



.example{
 padding: 20;
}
.example-cropped{
  background-color:red;
}

.example-full {
  background-color:green;
  height: 200px;
}