PrimeNg TabView和ConfirmDialog
PrimeNg TabView和ConfirmDialog
提问于 2019-01-29 10:28:27
我试图将PrimeNg TabView组件与confirmDialog一起使用，但没有成功，下面是我的代码：
<p-tabView (onChange)="onTabChange($event)" [(activeIndex)]="index">...</p-tabView>
onTabChange(event){
this.confirmationService.confirm({
message: 'Do you confirm ?',
accept: () => {
this.index = event.index;
},
reject:() =>{ }
});
}您对如何防止或允许使用“确认”对话框更改选项卡有想法吗？
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-30 09:28:19
基于材料设计选项卡的类似solution，下面是解决我的问题的方法：
- 在html中，声明引用TabView DOM对象的局部变量：
<p-tabView #onglets>...</p-tabView> - 在component.ts中，更改在单击带有特定函数的选项卡以匹配您的情况时调用的默认函数：
@ViewChild('onglets') onglets: TabView; this.onglets.open = this.interceptOngletChange.bind(this); ... interceptOngletChange(event: Event, tab: TabPanel){ const result = confirm(你真的想离开这个标签吗？); return result && TabView.prototype.open.apply(this.onglets, argumentsList); }); }
Stack Overflow用户
发布于 2022-02-24 10:51:19
我也有类似的问题。在选项卡更改之前需要显示对话框。
我的解决方案：
HTML
<p-tabView #tabView (onChange)="onChange($event)" />TS
@ViewChild('tabView') tabView: TabView;
onChange(event: any) {
const previoustab = this.tabView.tabs[this.prevIndex]; //saved previous/initial index
previoustab.selected = true;
const selectedTab = this.tabView.tabs[event.index];
selectedTab.selected = false;
this.tabView.activeIndex = this.prevIndex;
this.nextIndex= event.index;
}
GoToNextTab() {
this.tabView.activeIndex = this.nextIndex;
this.prevIndex= this.nextIndex;
this.tabView.open(undefined, this.tabView.tabs[this.nextIndex]);
}使用此代码，您将保留在所选选项卡上，而不会更改选项卡样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54418932
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号