单击时如何防止垫子扩展面板打开？答案

【问题标题】：How can I prevent a mat-expansion-panel from opening when clicked?单击时如何防止垫子扩展面板打开？
【发布时间】：2019-11-08 08:34:27
【问题描述】：

我想仅使用面板的 [expanded] 输入属性来控制我的 mat-expansion-panel。我正在使用 NGRX 作为状态管理。

因此，我不希望面板在点击时打开。相反，我有自己的点击监听器，它会发送正确的操作来打开面板。

如何防止它在点击时打开？我试过 (click)="$event.stopImmediatePropagation(); 但它没有成功。

<mat-accordion [multi]="true">
  <mat-expansion-panel [expanded]="item.isOpen">
    <mat-expansion-panel-header (click)="togglePanel($event, item)">
        <!-- Header Content-->
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        <!-- Panel Content -->
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

有什么想法吗？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

没有（据我所知）内置方法来禁用面板的点击，认为有一个简单的技巧只使用 CSS 来完成你想要的。

您可以将样式设置为pointer-events: none; 到<mat-expansion-panel>，它不会监听任何点击事件，然后您可以使用您的自定义逻辑来切换它。

我做了一个StackBlitz example 来演示一下。

【讨论】：