如何减少标签页点击?

Question

我有一个选项卡组：

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Programmes" tabIcon="icon-programmes"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="studioCheck()" tabTitle="Studio" tabIcon="icon-studio"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Library" tabIcon="icon-library"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="icon-profile"></ion-tab>
</ion-tabs>

当用户点击第二个标签页("工作室"(时，我需要检查他们是否有权访问它。 如果他们这样做，那就太好了，如果他们不这样做，我想显示一个 Toast 通知并加载第一个选项卡。

我该怎么做？

我以为return false就足够了studioCheck()，但事实并非如此。

打字稿：

studioCheck() {
console.log('Studio visited');
// Grab studio selected level
this.storage.get('studio_level').then((val) => {
console.log('Storage queried');
if(val) {
console.log('Level ID: ', val);
return true;
} else {
// No level selected
let toast = this.toastCtrl.create({
message: 'Please choose a programme in order to use the Studio',
duration: 3000,
position: 'top'
});
toast.present();
this.navCtrl.parent.select(0);
return false;
}
});
}

我认为也许ionSelect不会等待异步storage.get调用，所以我只是在函数的顶部做了一个return false;，但这是一样的。

有什么想法吗？

Answer 1

像这样调整视图

<ion-tabs #tabs>
<ion-tab [root]="tab1Root" tabTitle="Programmes" tabIcon="icon-programmes"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="studioCheck()" tabTitle="Studio" tabIcon="icon-studio"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Library" tabIcon="icon-library"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="icon-profile"></ion-tab>
</ion-tabs>

然后在控制器中：

export class MyPage {
@ViewChild("tabs") public tabs: Tabs;
...
studioCheck() {
console.log('Studio visited');
// Grab studio selected level
this.storage.get('studio_level').then((val) => {
console.log('Storage queried');
if(val) {
console.log('Level ID: ', val);
return true;
} else {
// No level selected
let toast = this.toastCtrl.create({
message: 'Please choose a programme in order to use the Studio',
duration: 3000,
position: 'top'
});
toast.present();
this.tabs.select(0);
}
});
}
}

解释

• 为了在代码中切换选项卡，您必须抓取Tabs的实例并调用select。
• 请记住，选择选项卡时会发出ionSelect，因此将忽略返回值。
• 由于this.storage.get，您的代码是异步的，因此无论如何return false;不要离开studioCheck方法