如何将切换按钮嵌入mat-options并实现独立交互？

DevOps 小满

2026-7-20

解决Mat-Option内嵌入切换按钮的事件冲突问题

问题核心是事件冒泡：点击mat-slide-toggle时，事件会向上传递到父级mat-option的click事件，导致误触发选项选中逻辑。要让两者独立工作，只需阻止切换按钮的事件冒泡，并为其绑定独立的状态管理逻辑。

具体实现步骤

给mat-slide-toggle添加(click)事件，调用$event.stopPropagation()阻止事件冒泡到mat-option
为每个列表项维护独立的切换状态，通过ngModel或(change)事件绑定状态值
保留mat-option原有的选中逻辑，确保点击选项区域（除切换按钮外）仍能正常选中/取消选项

修改后的代码示例

<mat-option 
  (click)="handleSelected(item)" 
  *ngFor="let item of defaultSelectValue | dataSearch : field.searchCtrl.value" 
  [value]="field.keySelect ? item[this.field.selectKey] : item"
>
  {{ item[this.field.selectValue] }} 
  <mat-slide-toggle 
    [(ngModel)]="item.toggleState"
    (click)="$event.stopPropagation()"
    (change)="handleToggleChange(item)"
  ></mat-slide-toggle>
</mat-option>

配套TS逻辑示例

// 初始化列表项的切换状态（在获取defaultSelectValue后执行）
this.defaultSelectValue.forEach(item => {
  item.toggleState = false; // 默认未开启
});

// 切换按钮状态变化时的处理逻辑
handleToggleChange(item: any) {
  // 这里写切换按钮状态改变后的业务逻辑，比如保存状态、触发其他操作等
  console.log(`Item ${item[this.field.selectValue]} 的切换状态变为: ${item.toggleState}`);
}

// 原有的选项选中逻辑保持不变
handleSelected(item: any) {
  // 处理选项选中/取消的业务逻辑
}