javascript - 如何防止通过单击 mat-expansion-panel-header 来切换 mat-expansion-panel？

Question

我知道 mat-expansion-panel-headers 是一个按钮。单击该按钮上的任意位置可切换扩展的打开/关闭。但我不想让用户单击标题上的任何位置并打开它。应该有一个小按钮。单击该按钮将打开/关闭扩展面板。我怎样才能做到这一点？

我已经尝试过了，但没有成功。

<mat-expansion-panel>
<mat-expansion-panel-header (click)="$event.preventDefault()">
  <mat-panel-title>
    MENU
  </mat-panel-title>
</mat-expansion-panel-header>

Answer 1

阿米尔的解决方案在某些情况下有效，但我遇到了一些箭头动画问题。我发现这里的解决方案更加一致，总的来说我认为它更好:

Prevent mat-expansion panel from toggling when mat-checkbox in Header 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>

例如，这将防止单击复选框时标题展开