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

Question

我想仅使用面板的 [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>

有任何想法吗？

Answer 1

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

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

我做了一个StackBlitz 示例来演示它。