如何阻止Toggle button交互时触发Expansion Panel展开

核心原因是点击切换按钮时，事件会向上冒泡到扩展面板的头部交互区域，触发面板默认的展开/收起逻辑，只需阻止该点击事件冒泡即可解决问题。

具体实现方式 #

• 给切换按钮绑定click事件，调用事件对象的stopPropagation()方法阻断事件冒泡
• 如果使用Angular Material组件库，参考示例代码如下：
  模板文件代码：

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>面板标题</mat-panel-title>
      <mat-panel-description>
        <mat-button-toggle (click)="$event.stopPropagation()" [(ngModel)]="toggleStatus">
          切换按钮
        </mat-button-toggle>
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>面板展开后的内容</p>
  </mat-expansion-panel>
  

• 如果切换按钮有自定义的点击处理逻辑，可将事件对象传入自定义函数后再阻止冒泡：
  模板代码：

  <mat-button-toggle (click)="handleToggle($event)">切换按钮</mat-button-toggle>
  

  组件逻辑代码：

  handleToggle(event: Event): void {
    // 先阻止事件冒泡
    event.stopPropagation();
    // 后续写你自己的切换业务逻辑
    console.log('切换按钮被点击，不会触发展开面板');
  }
  

该方案通用适配所有放在扩展面板头部、不需要点击时触发展开操作的交互元素，不限于切换按钮。

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