gpt4 book ai didi

angular - 如何防止在确认之前更改 MatTab?

转载 作者:行者123 更新时间:2023-12-04 14:51:59 26 4
gpt4 key购买 nike

我要坚持,MatTab的变化直到得到确认为止。我用过 MatDialog确认。 问题是,在单击"is"之前,选项卡已更改。
例如,从收入选项卡,我单击调整选项卡。在切换到该选项卡之前,我需要先显示弹出窗口 .但是在移动到调整选项卡后我得到了弹出窗口。
th image which show the popup
组件模板:

 <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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com