单击标题中的 mat-checkbox 时，防止 mat-expansion 面板切换 [英] Prevent mat-expansion panel from toggling when mat-checkbox in Header clicked

问题描述

当单击标题中的复选框时，我们可以防止扩展面板切换吗?以某种方式停止事件传播.现在使用下面的示例代码，当单击复选框时，面板也会切换(打开\关闭).所需的状态是当单击标题中除标题内的复选框外的任何区域时，扩展面板切换.

Can we prevent Expansion panel from toggling when checkbox inside header is clicked? Somehow stop the event propagation. Right now with below sample code, when the checkbox is clicked, the panel also toggles (opens\closes). Desired state is for expansion panel to toggle, when any area of header is clicked except the checkbox inside the header.

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox>Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

推荐答案

点击 mat-checkbox 时可以调用 stopPropagation $event 方法:

You can call the stopPropagation $event method when mat-checkbox is clicked:

<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>

这篇关于单击标题中的 mat-checkbox 时，防止 mat-expansion 面板切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！