如何在不使用mat-panel-description的情况下使用mat-accordion组件

我想使用mat-accordion组件，但不想包含mat-panel-description元素。有没有规范的实现方法？我查了官方文档没找到方案，知道可以用CSS隐藏，但不想破坏样式封装，是不是我漏了什么？

代码示例 #

即便我这么写，mat-panel-description仍会存在于DOM中

<mat-accordion multi>
  <ng-container *ngFor="let i of attributes?.list">
    <mat-expansion-panel class="mat-elevation-z0">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <h4>{{ i.title }}</h4>
        </mat-panel-title>
        <!-- <mat-panel-description class="hidden"></mat-panel-description> -> 我目前用CSS隐藏它  -->
      </mat-expansion-panel-header>
      <div class="panel-container">
        <div class="wysiwyg-container" [innerHtml]="i.content | safe: 'html'"></div>
      </div>
    </mat-expansion-panel>
  </ng-container>
</mat-accordion>

问题原因 #

在小屏幕设备上，这个元素会占用大量可用空间。

解决方案 #

• 自定义面板头部结构
  直接在mat-expansion-panel-header内编写自定义内容，不依赖mat-panel-title指令，框架不会自动生成mat-panel-description元素：

  <mat-expansion-panel-header>
    <h4>{{ i.title }}</h4>
  </mat-expansion-panel-header>
  

  这种方式完全由你控制头部布局，不会产生冗余DOM元素。

• 基于官方样式系统消除描述区
  利用Angular Material的SCSS混入定制样式，既不破坏组件样式封装，又能彻底清除描述区的空间占用：

  @use '@angular/material' as mat;
  
  :host ::ng-deep .mat-expansion-panel-header {
    @include mat.expansion-panel-header-base();
    .mat-expansion-panel-header-description {
      display: none;
      width: 0;
      margin: 0;
      padding: 0;
    }
  }
  

  :host ::ng-deep确保样式仅作用于当前组件，不会污染全局样式。

• 升级Angular Material版本
  部分旧版本会自动生成空的mat-panel-description元素，升级到最新稳定版后，当未显式添加该元素时，框架不会自动创建它，这是最省心的解决方式。

内容的提问来源于stack exchange，提问作者Raphaël Balet