如何实现点击mat-expansion-panel头部的mat-checkbox时不触发面板折叠？

这个问题我之前开发Angular Material项目时也碰到过，核心思路就是阻止checkbox的点击事件冒泡到外层的mat-expansion-panel-header，这样就能实现只有点击头部除checkbox外的区域才会触发面板的折叠/展开。

具体实现步骤 #

你只需要在<mat-checkbox>上添加(click)事件，调用事件对象的stopPropagation()方法即可，有两种写法：

写法1：直接在模板内处理（最简洁）

修改你的模板代码，给mat-checkbox绑定点击事件并阻止冒泡：

<mat-expansion-panel-header>
  <mat-panel-title> Panel Title </mat-panel-title>
  <mat-panel-description>
    <mat-checkbox (click)="$event.stopPropagation()">Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

写法2：在组件类中处理（适合需要额外逻辑的场景）

如果后续需要在点击checkbox时执行其他业务逻辑，可以把阻止冒泡的逻辑放到组件类里：

1. 组件类中定义方法：

stopEventPropagation(event: MouseEvent): void {
  event.stopPropagation();
  // 这里可以添加你需要的其他逻辑，比如checkbox状态变化后的处理
}

2. 模板中绑定这个方法：

<mat-expansion-panel-header>
  <mat-panel-title> Panel Title </mat-panel-title>
  <mat-panel-description>
    <mat-checkbox (click)="stopEventPropagation($event)">Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

原理说明 #

mat-expansion-panel-header本身会监听点击事件来切换面板的展开/折叠状态。当你点击头部内的checkbox时，点击事件会沿着DOM树向上冒泡，最终被header的点击监听器捕获，从而触发面板切换。通过调用$event.stopPropagation()，我们中断了事件的冒泡过程，让header无法接收到这个点击事件，自然就不会触发折叠/展开了。

注意：不要用(change)事件来处理，因为change是表单控件的状态变更事件，而触发面板切换的是鼠标点击事件，所以必须在(click)事件中阻止冒泡才有效。

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