angular - 如何防止更改 MatTab 直到确认?
问题描述
我想保留,更改MatTab
直到得到确认。我已用于MatDialog
确认。问题是,在单击“是”之前,该选项卡已经更改。
例如,从收入选项卡,我单击调整选项卡。在切换到该选项卡之前,我需要先显示弹出窗口。但是在移动到调整选项卡后我得到了弹出窗口。
组件模板:
<mat-tab-group (click)="tabClick($event)">
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
<app-spread></app-spread
</mat-tab>
</mat-tab-group>
组件 ts(onClick 的方法):
tabClick(clickEvent: any) {
if (clickEvent.target.innerText != 'First') {
this.confirm();
}
}
public async confirm() {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxHeight: '200px',
maxWidth: '767px',
width: '360px',
disableClose: true,
data: {
title: 'Confirmation Message',
content:
'There are valid statements that are not Final. Set the statements as Final?'
}
});
const res = dialogRef.afterClosed().subscribe(result => {
if (result === 1) {
//TODO need to change the tab
} else {
//TODO no need to change the tab
}
});
}
解决方案
前段时间我在这个SO中模拟了一个“mat-tab”
我想象你可以使用它只改变功能
<mat-tab-group #tabgroup style="margin-bottom:5px;"
animationDuration="0" mat-align-tabs="start"
(selectedIndexChange)="change(tabgroup,$event)">
...
</mat-tab-group>
功能变化:
change(tab:any,index:number)
{
if (tab.selectedIndex!=this.indexOld){
const dialogRef = this.dialog.open(....)
const res = dialogRef.afterClosed().subscribe(result => {
if (result === 1) {
this.index=index;
} else {
tab.selectedIndex=this.indexOld;
}
});
}
else
{
this.index=index;
}
}
查看stackblitz - 在stackblitz中我简单地使用确认对话框-
推荐阅读
- html - html中img标签的webp后备
- flutter - 如何从物理设备/生产应用程序获取错误日志
- c# - 如何在 ASP.NET MVC 中使用 C# 在 Page_Load 上设置页面事件
- flutter - 为什么单击“标题”时“onpressed”不起作用,但单击“leading”属性时起作用?
- javascript - 抱歉:另一个类型错误:无法读取未定义的属性“名称”
- java - Java BT 客户端 - 未找到对等点
- unity3d - 从元文件更改“spritePixelsToUnits”属性是否比使用“变换”选项调整纹理大小更有效?
- angular - 使用 bypassSecurityTrustResourceUrl 给 SafeValue must use [property] in result
- r - 带有 geom_raster ggplot2 的辅助轴
- python - Pip 错误:ModuleNotFoundError:没有名为“pip”的模块