angular - Cum pot atenua un clic pe un tab?

Am un grup de file:

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

Când un utilizator face clic pe al doilea tab („Studio”), trebuie să verific dacă are acces la acesta. Dacă are, perfect, dacă nu, vreau să afișez o notificare toast și să încarc primul tab.

Cum pot face asta?

Am crezut că un return false ar fi suficient în studioCheck(), dar nu este.

Typescript :

  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;
      }
    });
  }

Am crezut că poate ionSelect nu așteaptă apelul asincron storage.get, așa că am pus doar un return false; în partea de sus a funcției, dar face același lucru.

Vreo idee?

Răspuns #1

ajustează vizualizarea astfel

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

și apoi în controller:

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);
            }
        });
    }
}

Explicație

pentru a comuta fila în cod, trebuie să obții o instanță a Tabs și să apelezi select pe aceasta.
țineți cont că ionSelect este emis când fila este selectată, deci valoarea returnată este ignorată.
din cauza this.storage.get, codul tău este asincron, așa că return false; nu părăsește metoda studioCheck oricum