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

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 example来演示它。