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的解决方案在某些情况下可以使用，但是我在使用箭头时遇到了一些动画问题。我发现这里的解决方案更加一致，总的来说我认为更好：

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>

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

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>

请参阅stackblitz

Answer 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();
}

Answer 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()" 它可能会帮助某人。谢谢....

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

4 个答案: