angular - 覆盖 Angular 材质扩展面板标题中的默认功能
问题描述
我正在尝试覆盖 Angular 材质扩展面板的默认折叠和展开功能。
https://material.angular.io/components/expansion/overview
默认情况下,如果在面板标题中的任何 位置单击鼠标,扩展面板将切换展开/折叠。
我想禁止此功能,以便可以将自定义“工具栏”按钮添加到标题中。
我尝试向 Panel Header 添加一个 click 事件处理程序并调用: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 <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();
}
}
解决方案
像下面这样的东西应该做你需要的。
使用hideToggle
属性mat-expansion-panel
<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
推荐阅读
- javascript - 将大小数四舍五入到最接近的小数
- django - 这是从 django 中的 chechboxes 保存多个数据的最佳方法
- mysql - 请帮助使用两个表和 M:N 行映射优化 MySql UPDATE
- ubuntu - 我可以使用 podman 无根运行 bash 吗?
- python - 匹配不同文件中的字符串并连接值
- typescript - 打字稿文件为空导致问题
- javascript - 在 iOS 版 Google Chrome 上的数据 URL 上,锚标记的下载属性被忽略
- dynamics-365 - 动态映射
- java - 递归计算二叉树中的叶子数
- laravel - Laravel Sanctum auth:sanctum 路由允许在没有承载令牌的情况下访问