我正在使用 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
}
最佳答案
目前有一个关于此的功能请求,大约有一年的时间,所以不确定 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
关于angularjs - MatExapansionPanel 的 Angular Material Limit 切换为仅单击箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53595263/