如何减轻标签点击？

Posted 2023-03-13

【中文标题】如何减轻标签点击？

【英文标题】：How can mitigate a tab click?

【发布时间】：2017-12-31 02:12:50

【问题描述】：

我有一个标签组：

<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;，但效果相同。

有什么想法吗？

【参考方案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 方法

【讨论】：

这仍然有相同的结果。原因是this.storage.get 是异步的，所以标签切换无需等待存储调用。

是的标签切换，但它应该很快返回到第一个标签，以防它被限制..这就是“this.tabs.select(0)”的目的

它失败了，因为我要切换到的选项卡运行，我想阻止它，因为它需要的存储中的数据不存在。我知道我可以在该页面中添加逻辑以防止这种情况发生，但我希望有一种方法根本不打开选项卡，而不是打开然后关闭它

hm，离子选项卡上有“启用”属性，但我想这不是你的选择，因为你希望选项卡是可点击的。您将需要自己的 ion-tabs 实现，有可用的源代码，您可以从中获得灵感：github.com/ionic-team/ionic/blob/master/src/components/tabs/…