我要坚持,MatTab
的变化直到得到确认为止。我用过 MatDialog
确认。 问题是,在单击"is"之前,选项卡已更改。
例如,从收入选项卡,我单击调整选项卡。在切换到该选项卡之前,我需要先显示弹出窗口 .但是在移动到调整选项卡后我得到了弹出窗口。
组件模板:
<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中,我简单地使用了确认对话框-
关于angular - 如何防止在确认之前更改 MatTab?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68922301/