时间戳

首页 > 解决方案 > 如何通过单击 mat-expansion-panel-header 来防止切换 mat-expansion-panel？

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

问题描述

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

标签： javascripthtmlangularangular-material

解决方案

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>

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

推荐阅读