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

原文由 Samiul Alam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以玩切换功能：

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

参见 stackblitz

原文由 amir azizkhani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

单击标题中的垫子复选框时，防止垫子扩展面板切换

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

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

原文由 Nathan Clark Baumgartner 发布，翻译遵循 CC BY-SA 4.0 许可协议