Как я могу предотвратить открытие панели расширения мата при нажатии?

Question

Я хочу управлять панелью расширения матов исключительно с помощью [расширенного] свойства ввода панели . Я использую 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 , чтобы продемонстрировать это.