替代"角度材质展开"面板标题中的默认功能

Question

我正在尝试覆盖"角度材质展开面板"的默认折叠和展开功能
https://material.angular.io/components/expansion/overview

默认情况下，如果单击面板标题中的ANYWHERE，扩展面板将切换展开/折叠。

我想取消这个功能，这样我就可以在标题中添加自定义的"工具栏"按钮。

我试着在Panel Header中添加了一个点击事件处理程序，并调用：event.stopPropogation();来防止展开和折叠无效。

我还尝试在面板标题中添加一个带有点击事件处理程序的按钮，看看是否可以避开展开和折叠。不幸的是，这也没有奏效。

https://stackblitz.com/edit/angular-ritpbb

HTML

<mat-expansion-panel #matExpansionPanel  
[class.active]="selected" 
(click)="componentSelected($event)" 
[expanded]="expanded">
<mat-expansion-panel-header (click)="togglePanel($event)">
Collapse Test&nbsp;&nbsp;<button mat-button>select panel</button>
</mat-expansion-panel-header>
CONTENT FOR EXPANSION PANEL
<mat-action-row>
<button mat-button (click)="buttonClick($event)">remove</button>
</mat-action-row>
</mat-expansion-panel>

.TS

import { Component } from '@angular/core';
import { MatExpansionPanel } from '@angular/material';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
expanded = true;
selected = false;
componentSelected($event) {
this.selected = !this.selected;
event.stopPropagation();
}
buttonClick($event) {
this.selected = !this.selected;
console.log('test');
event.stopPropagation();
}
togglePanel($event) {
this.expanded = !this.expanded;
//event.stopPropagation();
}
}

Answer 1

下面这样的东西应该可以满足您的需要。

在mat-expansion-panel上使用hideToggle属性

<mat-expansion-panel #matExpansionPanel  
[class.active]="selected"  
[expanded]="expanded"
hideToggle>

将event传递到expandPanel()

<mat-expansion-panel-header (click)="expandPanel($event)" >

获取matExpansionPanel的参考，以便在expandPanel()中使用

@ViewChild('matExpansionPanel') _matExpansionPanel:any

expandPanel()方法

expandPanel(event): void {
event.stopPropagation(); // Preventing event bubbling
if (this.expanded) {
this._matExpansionPanel.open(); // Here's the magic
}else{
this._matExpansionPanel.close()
}
}

CSS

以下内容将覆盖鼠标指针

.mat-expansion-panel-header:not([aria-disabled=true]) {
cursor: default !important;
}
button{
cursor: pointer
}

堆叠闪电

https://stackblitz.com/edit/angular-jztdvu?embed=1&file=src/app/app.component.ts

Answer 2

您可以添加[disabled]="true"来阻止默认功能。如果这是你问的问题

堆叠闪电战：https://stackblitz.com/edit/angular-nmupwc

您可以使用[disabled]="true"标志禁用垫子扩展面板，并从外部控制展开/折叠功能，如stackblitz所示。我只是使用了已经可用的随机按钮和变量，但你明白了。。

Answer 3

您可以在操作中停止点击事件的传播：

<mat-expansion-panel *ngFor="let panel of panels">
<mat-expansion-panel-header>
<mat-panel-title>title</mat-panel-title>
<mat-panel-description>
<mat-icon (click)="edit($event)">edit</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
</mat-expansion-panel>

组件功能：

edit(event: Event) {
event.stopPropagation();
... do the logic here...
}

Answer 4

将内联CSS属性添加到类似<mat-expansion-panel-header>的中

<mat-expansion-panel-header style="pointer-event: none">
Panel Title
</mat-expansion-panel-header>