如何通过单击 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

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

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

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

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

Answer 2

你可以玩切换功能：

<mat-expansion-panel >
<mat-expansion-panel-header #panelH (click)="panelH._toggle()">
  <mat-panel-title>
   <i class="material-icons app-toolbar-menu" (click)="panelH._toggle()">menu </i>
  </mat-panel-title>
  <mat-panel-description>

  </mat-panel-description>
</mat-expansion-panel-header>

见堆栈闪电战