angular – 如何减轻标签点击？

发布时间：2020-12-17 16:59:42 所属栏目：安全来源：网络整理

导读：我有一个标签组： 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" tab

我有一个标签组：

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

当用户点击第二个标签(‘Studio’)时,我需要检查他们是否有权访问它.如果他们这样做,那很好,如果他们不这样做,我想显示一个Toast通知并加载第一个标签.

我怎样才能做到这一点？

我认为对于studioCheck(),返回false就足够了,但事实并非如此.

打字稿：

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调用,所以我只是返回false;在函数的顶部,但也是如此.

有任何想法吗？

解决方法

像这样调整视图

<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',position: 'top'
                });
                toast.present();
                this.tabs.select(0);
            }
        });
    }
}

说明

>为了在代码中切换选项卡,您必须抓取选项卡的实例并在其上调用选择.>请记住,选择选项卡时会发出ionSelect,因此忽略返回值.>由于this.storage.get,你的代码是异步的,所以返回false;不管怎么说都不要离开studioCheck方法

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!