自定义mat-expansion面板：前置复选框+图标随指定文本放置

不需要更换组件，通过Angular Material的模板自定义和CSS调整就能实现需求，具体步骤如下：

1. 前置复选框实现 #

直接在mat-expansion-panel-header内部最前方添加mat-checkbox，结合布局类控制元素间距：

<mat-accordion>
  <mat-expansion-panel #expansionPanel *ngFor="let book of books">
    <mat-expansion-panel-header>
      <mat-checkbox [(ngModel)]="book.selected" class="mr-2"></mat-checkbox>
      <div class="header-content">
        <span>{{book.title}}</span>
        <!-- 自定义展开图标 -->
        <span class="expand-icon" (click)="expansionPanel.toggle()">
          <mat-icon>{{expansionPanel.expanded ? 'expand_less' : 'expand_more'}}</mat-icon>
        </span>
        <span class="secondary-text">{{book.author}}</span>
      </div>
    </mat-expansion-panel-header>
    <!-- 面板展开内容 -->
    <p>{{book.description}}</p>
  </mat-expansion-panel>
</mat-accordion>

2. 自定义展开图标位置 #

第一步：隐藏原生图标 #

在组件样式或全局样式中添加：

.mat-expansion-panel-header .mat-expansion-indicator {
  display: none;
}

第二步：布局调整 #

通过CSS控制标题区域的元素排列，把图标固定在书名后方：

.header-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.expand-icon {
  cursor: pointer;
  color: rgba(0,0,0,.54);
}

.secondary-text {
  margin-left: auto;
  color: rgba(0,0,0,.54);
}

3. 布局优化要点 #

• 用flex布局确保mat-expansion-panel-header内部元素对齐规整
• 给复选框添加右侧间距，避免和标题紧贴
• 次要文本（如作者名）通过margin-left: auto推至右侧，保持整体布局平衡

关键注意事项 #

• 确保模块中已导入MatCheckboxModule和MatIconModule
• 模板变量#expansionPanel需绑定到mat-expansion-panel上，用于获取和控制展开状态

内容的提问来源于stack exchange，提问作者Vanu