Angular material sidenav动态高度

Question

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

对于我目前正在做的项目，需要在 material sidenav 中创建动态组件。

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

我已经全部设置好了，它确实有效，除了新的要求，如果动态组件高度例如是 400px，material sidenav 不会扩展到底部而是切断在组件的高度。

有谁知道这样做的干净方法吗？如果不是，它也可以使用 CSS 技巧。

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

Answer 1

创建一个描述 sidenav 核心的 class 并创建其他 2 个 class 来描述导航栏的 2 状态。当您进行额外扩展时，只需根据您的 showfiller 状态更改应用于导航栏的 class 状态。

  <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;
}