作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我要坚持,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/
我要坚持,MatTab的变化直到得到确认为止。我用过 MatDialog确认。 问题是,在单击"is"之前,选项卡已更改。 例如,从收入选项卡,我单击调整选项卡。在切换到该选项卡之前,我需要先显示弹出
我是 Angular 的新手,我希望我的代码能够记住我在哪个选项卡上,即使在我刷新页面或转到另一个页面然后返回后也是如此。因此,如果我在 tab2 上并刷新浏览器,我希望页面再次加载 tab2 而不是
我通过选项卡动态循环,我想添加一个(单击)事件,以便能够在我选择选项卡时加载不同的选项。 是否可以在 上设置事件(点击)事件?我尝试使用 (selectChange) on 但在创建选项卡时我无法从我
我是一名优秀的程序员,十分优秀!