PrimeNg TabView с ConfirmDialog

Question

Я пытаюсь использовать компонент PrimeNg TabView вместе с verifyDialog безуспешно, вот мой код:

<p-tabView (onChange)="onTabChange($event)" [(activeIndex)]="index">...</p-tabView> 


  onTabChange(event){
    this.confirmationService.confirm({
      message: 'Do you confirm ?',
      accept:  () => {
      this.index = event.index;
      },
      reject:() =>{        }
      });
   }

У вас есть идея, как запретить или разрешить изменение вкладки с помощью диалогового окна подтверждения?

Спасибо

Answer 1

На основе аналогичного решения для вкладок дизайна материалов, вот решение для моей проблемы:

1. в html Объявите локальную переменную, ссылающуюся на объект DOM TabView:

   <p-tabView #onglets>...</p-tabView>

2. в 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); }); }

Answer 2

У меня была аналогичная проблема. Необходимо показать диалог перед сменой вкладок.
Мое решение:

HTML

      <p-tabView #tabView (onChange)="onChange($event)" />

ТС

      @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]);
  }

С этим кодом вы останетесь на выбранной вкладке без изменения стиля вкладки.