Tìm kiếm trang web

angular - Làm thế nào để giảm thiểu một lần click tab?

Tôi có một nhóm 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>

Khi người dùng nhấp vào tab thứ hai ('Studio'), tôi cần kiểm tra xem họ đã có quyền truy cập vào nó chưa. Nếu có, tốt, nếu không, tôi muốn hiển thị thông báo dạng toast và tải tab đầu tiên.

Làm thế nào tôi có thể làm điều này?

Tôi nghĩ một return false sẽ đủ trên studioCheck(), nhưng nó không đủ.

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

Tôi nghĩ rằng có lẽ ionSelect không chờ cuộc gọi bất đồng bộ storage.get, vì vậy tôi chỉ làm một return false; ở đầu hàm, nhưng điều đó cũng giống nhau.

Có ý tưởng gì không?

Câu trả lời #1

điều chỉnh chế độ xem như thế này

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

và sau đó trong bộ điều khiển:

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

Giải thích

  • Để chuyển tab trong mã, bạn phải lấy thể hiện của Tabs và gọi select trên đó.
  • hãy nhớ rằng ionSelect được phát ra khi tab được chọn, vì vậy giá trị trả về sẽ bị bỏ qua.
  • do this.storage.get, mã của bạn là bất đồng bộ, vì vậy return false; không rời khỏi phương thức studioCheck dù sao