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

Question

我想控制我的 mat-expansion-panel 仅使用面板的 [expanded] 输入属性。我正在使用 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 example来证明它。