Angular - как запретить доступ к tabPanel в tabView при нажатии на вкладку

Question

У меня есть вкладка с несколькими панелями. Я могу управлять им программно, используя [activeIndex] У меня проблема в том, что когда я нажимаю на вкладку, я должен отображать предупреждение и запретить доступ к этой вкладке, если для переменной задано значение false. Я могу показать предупреждение хорошо, но я также могу видеть и получить доступ к вкладке. Есть ли способ, когда ты нажмите на вкладку, она просто показывает предупреждение и запрещает доступ к вкладке (не показывает ее содержимое и просто остается на текущей вкладке).

Я использую Angular 6 с PrimeNG

HTML:

<p-tabView [activeIndex]="activeindex" (onChange)="handleChange($event)">
    <p-tabPanel header="I am Tab1" [disabled]="isAllowedAccess">
        <app-tab1-contents></app-tab1-contents>
    </p-tabPanel>
    <p-tabPanel header="I am Tab2(I need to deny access if var is false)" [disabled]="isAllowedAccess">
        <app-tab2-request></app-tab2-request>
    </p-tabPanel>
</p-tabView>

Машинопись:

handleChange(e: any) {

    if (e.index == 1) //target the second tab
     {
        if (this.sampleVariable == false) {
            //just show the alert box and hide tab contents
            alert('Access Denied');
            //tried redirecting to another tab but it doesn't work
            e.index = 0;
        } else {
            //allow access, show tab contents
        }
    }
}

Answer 1

В вашем HTML, вам нужно добавить имя во вкладку с помощью #. Пример:

 <p-tabView [activeIndex]="activeindex" #tabView (...)

Во второй раз, в вашем коде ts, объявите вкладку:

 @ViewChild('tabView') tabview: TabView;

Затем в вашем методе измените на:

handleChange(e: any) {

if (e.index == 1) //target the second tab
 {
    if (this.sampleVariable == false) {
        //just show the alert box and hide tab contents
        alert('Access Denied');
        //redirecting to another tab with tabview declared as viewchild of HTML side
        this.tabview.activeIndex = 0;
    } else {
        //allow access, show tab contents
    }
}

}