将 MatExapansionPanel 的角度材质限制切换为仅单击箭头

Question

我正在使用 Angular Material 创建我的切换面板。我仍然希望我的面板在单击箭头时展开和收缩，但是当我单击面板标题中的任何位置时我不会，因为我想在顶部添加一个复选框。目前，当我单击复选框时，会在单击复选框时触发面板的切换事件。复选框的“更改”事件随后仍会触发。

我不介意仅在单击其箭头时让面板切换，如何在单击顶部的任意位置时停止触发面板的切换？

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>

打字稿

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) );
  }

闪电战

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