Question

我有一个Tabview，其中有一些TabPanel。我可以使用[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>

TYPESCRIPT：

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代码中，声明tabview：

 @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
    }
}

}

Angular-如何在选项卡单击时拒绝对tabView中的tabPanel的访问

1 个答案: