angularjs - MatExapansionPanel 的 Angular Material Limit 切换为仅单击箭头

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>

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

堆栈 Blitz

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