单击标题中的mat-checkbox时,防止mat-expansion面板切换

Question

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

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

Answer 1

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

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