Ограничение углового материала для панели MatExapansionPanel только по нажатию стрелки

Question

Я использую Angular Material для создания своих переключаемых панелей.Я все еще хочу, чтобы моя панель расширялась и сжималась при нажатии на стрелку, но не когда я щелкаю в любом месте заголовка панели, потому что я хочу добавить флажок вверху.В настоящее время, когда я нажимаю на свой флажок, событие переключателя панели срабатывает, когда я нажимаю флажок.Событие 'change' флажка все еще срабатывает после.

Я не против, чтобы панель переключалась только при нажатии на ее стрелку. Как я могу остановить переключение панели при срабатывании при нажатии в любом месте сверху?

HTML

<mat-expansion-panel #panel
       (opened)="togglePanel()"
       (closed)="togglePanel()">
    <mat-expansion-panel-header>
        <mat-panel-title>
            <mat-checkbox (change)="onCheckChanged($event)">
                <label>Options 1</label>
            </mat-checkbox>
        </mat-panel-title>
        <mat-panel-description></mat-panel-description>
    </mat-expansion-panel-header>
</mat-expansion-panel>

TypeScript

togglePanel() {
    // this event fires before the onCheckChanged event
}

onCheckChanged(event: MatCheckboxChange) {
    // this event fires after the togglePanel event
}

Answer 1

В настоящее время существует запрос на добавление этой функции, ему около года, поэтому я не уверен в ETA ... кажется, что некоторые обходные пути, с которыми играют люди, могут помочь, но, похоже, имеют смешанные отзывы.

https://github.com/angular/material2/issues/8190

---

Редакция

Я протестировал следующее в stackblitz, и, похоже, оно работает.

HTML

<mat-accordion>
  <mat-expansion-panel #expansionPanel>
    <mat-expansion-panel-header (click)="expandPanel(expansionPanel, $event)">

Компонент

 expandPanel(matExpansionPanel, event): void {
        event.stopPropagation(); // Preventing event bubbling

        if (!this._isExpansionIndicator(event.target)) {
          matExpansionPanel.close(); // Here's the magic
        }
      }



   private _isExpansionIndicator(target: EventTarget): boolean {
    const expansionIndicatorClass = 'mat-expansion-indicator';

    return (target['classList'] && target['classList'].contains(expansionIndicatorClass) );
  }

Stackblitz

https://stackblitz.com/edit/angular-5kugm3?embed=1&file=app/expansion-overview-example.html