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

【问题标题】：How to prevent toggling mat-expansion-panel by clicking mat-expansion-panel-header?如何通过单击 mat-expansion-panel-header 来防止切换 mat-expansion-panel？
【发布时间】：2019-10-26 18:33:18
【问题描述】：

我知道 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>

【问题讨论】：

作为一个黑客，你可以尝试在点击时切换状态，所以打开状态会在 DOM 更新之前快速从关闭变为打开并返回关闭，你明白吗？
我认为这是我的最后一个工具。但我不认为这是最好的主意。最好能阻止mat-expansion-panel-behavior 的默认行为。

标签： javascript html angular angular-material

【解决方案1】：

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

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>

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

【讨论】：

不错！也适用于mat-panel-description 本身（在我的情况下，我在mat-panel-description 内呈现了一些按钮，点击这些按钮不必要地切换面板状态 - 可能是某种事件冒泡 - 并且mat-panel-description 上的stopPropagation 停止了它；而不必分别在每个按钮上执行stopPropagation）
这对我来说更有帮助，就像 _panelH._toggle()_ 一样，(opened)='function1()' 中的函数即使被调用，只是面板没有展开。

【解决方案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>

见stackblitz

【讨论】：

很好，因为这个解决方案适用于 mat-slide-toggle 而 stopPropagation 不起作用

【解决方案3】：

在默认行为对我有用后立即关闭面板。

<mat-expansion-panel #panel [hideToggle]="true" (opened)="doSomething()">
<mat-expansion-panel-header>
  <mat-panel-title>Menu</mat-panel-title>
</mat-expansion-panel-header>

TS 文件

@ViewChild("panel") panel;

doSomething() {
  //do stuff
  this.panel.close();
}

【讨论】：

【解决方案4】：

防止单击 mat-expansion-panel-header 中特定按钮的切换。

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

使用它可以防止点击特定元素 (click)="!exppanel._toggle()" 它可能会帮助某人。谢谢……

【讨论】：