角度 - 如何在选项卡单击时拒绝访问选项卡视图中的选项卡面板

Question

我有一个选项卡视图，里面有一些选项卡面板。我可以使用 [activeIndex] 以编程方式控制它 我遇到的问题是，当我单击选项卡时，我应该显示警报 如果变量设置为 false，则拒绝访问此选项卡。我可以很好地显示警报，但是我也可以看到和访问该选项卡。有没有办法当你 单击选项卡，它只显示警报并拒绝访问选项卡(不显示其内容，只需停留在当前选项卡上(。

我正在使用带有PrimeNG的Angular 6

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

}