导航到 Ionic 3 中的特定选项卡

Question

单击按钮时，我无法选择选项卡的索引。我在 android-tutorial.ts 中这样调用索引，但它不起作用。

我正在调用 android-tutorial.ts 中的函数，函数 startApp();

还有其他方法吗？我究竟做错了什么？希望你能帮助我！

制表符-page.ts

mySelectedIndex: number = 0;
   tabs: Tab[] = [
       {
           page: "NoveltiesPage",
           icon: "icon-novelties"
       },
       {
           page: "BrandsPage",
           icon: "icon-menus"
       },
       {
           page: "LoginPage",
           icon: "icon-user"
       },
       {
           page: "StoresPage",
           icon: "icon-stores"
       },
       {
           page: "AboutPage",
           icon: "custom-hat"
       }
   ];
constructor(public navCtrl: NavController, public events: Events, public alertCtrl: AlertController, public storageProvider: StorageProvider, public pushProvider: PushProvider, public aboutProvider: AboutProvider, private appVersion: AppVersion, public platform: Platform, public deviceProvider: DeviceProvider, public alertProvider: AlertProvider) {
       this.platform.ready().then(() => {
           this.getVersion();
           //Navigate to Login Page on Startup

           this.storageProvider.getUser().then((user: User) => {
               if (user && user.token) {
                   let token = user.token;
                   this.events.publish("user:login", token);
                   this.pushProvider.start();
               }
           });
       });

       this.platform.resume.subscribe(() => {
           this.getVersion();
       });

       this.events.subscribe("user:login", () => {
           this.tabs[2].page = "AccountPage";
       });

       this.events.subscribe("user:logout", () => {
           this.tabs[2].page = "LoginPage";
       });

       this.events.subscribe("user:notification", (data: any) => {
           switch (data.additionalData.type) {
               case "novelty":
                   this.events.publish("novelty:new");
                   this.navCtrl.push("NoveltyPage", {
                       id: data.additionalData.id
                   });
                   break;
               // case "message":
               //  this.events.publish('message:new');
               //  this.navCtrl.push('MessagePage', {
               //      id: data.additionalData.id,
               //  });
               //  break;
               default:
                   this.events.publish("card:update");
                   this.alertProvider.show(data.title, data.message);
                   break;
           }
       });
   }

   getVersion() {
       //get the version of the method
       this.aboutProvider.app().subscribe((data: any) => {
           this.curVersion = data.data;

           //get platform of the Device
           let platform = this.deviceProvider.getPlatform();

           let curV: string = this.curVersion.ios;
           let store: string = this.curVersion.app_ios_url;

           if (platform == "Android") {
               curV = this.curVersion.android;
               store = this.curVersion.app_android_url;
           }

           //get the version of the app
           this.appVersion
               .getVersionNumber()
               .then((data: any) => {
                   let version = data;

                   if (curV > version) {
                       switch (this.curVersion.status) {
                           case "1":
                               this.alertProvider.action(this.curVersion.title, this.curVersion.message, [{ text: "Cancelar" }, { text: "Atualizar", action: "link", link: store }]);
                               break;

                           case "2":
                               this.alertProvider.action(this.curVersion.title, this.curVersion.message, [{ text: "Atualizar", action: "link", link: store }], false);
                               break;

                           default:
                               break;
                       }
                   }
               })
               .catch(e => {});
       });
   }
}

android-tutorial.ts

import { Component, ViewChild } from '@angular/core';
import { Storage } from '@ionic/storage';
import { IonicPage, Slides, NavController, Events, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-android-tutorial',
  templateUrl: 'android-tutorial.html',
})
export class AndroidTutorialPage {
    seen: boolean;
    currentIndex: number = 1;
    @ViewChild('slides') slides: Slides;

    constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, public events: Events) {
        this.seen = this.navParams.data.seen;
        if (!this.seen) {
            this.seen = false;
        }
    }

    startApp() {
        this.navCtrl.setRoot('TabsPage', {
         mySelectedIndex : 2
        });
        this.storage.set('hasSeenTutorial', 'true');
    }

    back() {
        this.navCtrl.pop();
    }

    slideChanged() {
        let index = this.slides.getActiveIndex();
        if(index != 4) {
            this.currentIndex = this.slides.getActiveIndex() + 1;
        }
    }

}

制表符-page.html

<ion-tabs [selectedIndex]="mySelectedIndex">
   <ion-tab [root]="tab.page" tabIcon="{{tab.icon}}" *ngFor="let tab of tabs"></ion-tab>
</ion-tabs>

Answer 1

好的，我找到办法了。

我是这样解决的。我需要能够将索引从 android-tutorial.ts 传递到 tabs-page.ts

这是我唯一添加的内容：

    constructor(public navCtrl: NavController, public events: Events, public alertCtrl: AlertController, public storageProvider: StorageProvider, public pushProvider: PushProvider, public aboutProvider: AboutProvider, private appVersion: AppVersion, public platform: Platform, public deviceProvider: DeviceProvider, public alertProvider: AlertProvider, public params: NavParams) {

        this.mySelectedIndex = this.params.get('mySelectedIndex'); <---- THIS IS THE LINE I ADDED

        this.platform.ready().then(() => {
            this.getVersion();
            //Navigate to Login Page on Startup

            this.storageProvider.getUser().then((user: User) => {
                if (user && user.token) {
                    let token = user.token;
                    this.events.publish("user:login", token);
                    this.pushProvider.start();
                }
            });
        });

        this.platform.resume.subscribe(() => {
            this.getVersion();
        });

        this.events.subscribe("user:login", () => {
            this.tabs[2].page = "AccountPage";
        });

        this.events.subscribe("user:logout", () => {
            this.tabs[2].page = "LoginPage";
        });

        this.events.subscribe("user:notification", (data: any) => {
            switch (data.additionalData.type) {
                case "novelty":
                    this.events.publish("novelty:new");
                    this.navCtrl.push("NoveltyPage", {
                        id: data.additionalData.id
                    });
                    break;
                // case "message":
                //  this.events.publish('message:new');
                //  this.navCtrl.push('MessagePage', {
                //      id: data.additionalData.id,
                //  });
                //  break;
                default:
                    this.events.publish("card:update");
                    this.alertProvider.show(data.title, data.message);
                    break;
            }
        });
    }

导航到 Ionic 3 中的特定选项卡

Navigate to specific tab in Ionic 3

tabs

ionic-framework

ionic3