אנגולר - איך אפשר להקטין השפעה של לחיצה על לשונית?

יש לי קבוצת לשוניות:

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

כאשר משתמש לוחץ על הכרטיסייה השנייה ('סטודיו'), אני צריך לבדוק אם יש לו גישה אליה כבר. אם יש, מצוין, אם אין, אני רוצה להציג הודעת טוסט ולטעון את הכרטיסייה הראשונה.

איך אני יכול לעשות את זה?

חשבתי ש-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 בכל מקרה