Vyhledávání na webu

angular - Jak lze zmírnit kliknutí na kartu?

Mám skupinu záložek:

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

Když uživatel klikne na druhou záložku ('Studio'), potřebuji zkontrolovat, zda k ní již má přístup. Pokud ano, skvěle, pokud ne, chci zobrazit toastové oznámení a načíst první záložku.

Jak to mohu udělat?

Myslel jsem, že by stačilo return false v studioCheck(), ale nestačí to.

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

Myslel jsem, že možná ionSelect nečeká na asynchronní volání storage.get, takže jsem jen dal return false; na začátek funkce, ale to dělá totéž.

Máte nějaké nápady?

Odpověď č. 1

nastavte zobrazení takto

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

a pak v kontroleru:

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

Vysvětlení

  • Aby bylo možné přepnout kartu v kódu, musíte získat instanci Tabs a zavolat na ní select.
  • mějte na paměti, že ionSelect je vyvolán, když je karta vybrána, takže návratová hodnota je ignorována.
  • kvůli this.storage.get je váš kód asynchronní, takže return false; stejně neukončí metodu studioCheck