角材质sidenav动态高度

Question

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

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

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

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

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

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

Answer 1

创建一个描述sidenav核心的类，并创建其他2个描述导航栏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;
}