如何通过点击按钮展开所有含嵌套面板的Mat-expansion-panel？

实现思路 #

通过@ViewChildren获取页面中所有的MatExpansionPanel实例（包括外层和内层），统一控制它们的expanded属性，实现一键全部展开/折叠。

具体代码实现 #

1. 组件类（.ts文件）

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatExpansionPanel } from '@angular/material/expansion';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 获取所有MatExpansionPanel实例（含嵌套的内层面板）
  @ViewChildren(MatExpansionPanel) panels!: QueryList<MatExpansionPanel>;

  // 全部展开方法
  expandAll() {
    this.panels.forEach(panel => panel.expanded = true);
  }

  // 全部折叠方法
  collapseAll() {
    this.panels.forEach(panel => panel.expanded = false);
  }
}

2. 模板文件（.html文件）

保留原有面板结构，修改按钮绑定对应方法即可：

<button mat-raised-button (click)="expandAll()">全部展开</button>
<button mat-raised-button (click)="collapseAll()">全部折叠</button>

<!-- 外层面板示例 -->
<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>外层面板1</mat-panel-title>
  </mat-expansion-panel-header>
  <!-- 嵌套内层面板 -->
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>内层面板1-1</mat-panel-title>
    </mat-expansion-panel-header>
    内层面板内容
  </mat-expansion-panel>
</mat-expansion-panel>

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>外层面板2</mat-panel-title>
  </mat-expansion-panel-header>
  <!-- 嵌套内层面板 -->
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>内层面板2-1</mat-panel-title>
    </mat-expansion-panel-header>
    内层面板内容
  </mat-expansion-panel>
</mat-expansion-panel>

原理说明 #

• @ViewChildren(MatExpansionPanel)会查询当前组件视图内所有MatExpansionPanel实例，无论层级嵌套，因此能同时捕获外层和内层面板。
• 遍历所有面板实例，直接设置expanded属性的布尔值，即可实现统一的展开/折叠控制。

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