Wie kann man einen Tab Klick abmildern?

Question

Ich habe eine Registerkarte Gruppe:

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

Wenn ein Benutzer den zweiten Registerkarte (‚Studio‘) klickt, muß ich überprüfen, ob sie Zugang zu ihm noch. Wenn sie es tun, toll, wenn sie es nicht tun, möchte ich eine Toast-Benachrichtigung anzeigen und den ersten Tab laden.

Wie kann ich das tun?

Ich dachte, ein return false würde ausreichen, auf studioCheck(), aber es tut es nicht.

Typoskript:

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

Ich dachte, dass vielleicht die ionSelect nicht für den storage.get Aufruf asynchron nicht warten, so dass ich habe gerade ein return false; an der Spitze der Funktion, aber das macht das gleiche.

Irgendwelche Ideen?

Answer 1

anpassen Ansicht wie diese

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

und dann in der Steuerung:

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

Erklärung

• um Registerkarte in Code zu wechseln, müssen Sie Instanz Tabs und Call grap select darauf.
• Beachten Sie, dass ionSelect ausgegeben wird, wenn die Registerkarte ausgewählt ist, so dass der Rückgabewert ignoriert wird.
• aufgrund this.storage.get, Ihr Code ist async, so return false; nicht verlassen studioCheck Methode sowieso