Navigate to specific tab in Ionic 3 - ionic-framework

Question

I'm having trouble selecting the index of Tabs when on Button click. I'm calling the index like so, in android-tutorial.ts but it isn't working.
I am calling the function in android-tutorial.ts, with the function startApp();
Is there any other way to do this? What am I doing wrong?
Hope you can help me!
tabs-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;
}
}
}
tabs-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

Ok I find a way to do it.
Here's how i solved it. I needed to be able to pass an Index to the tabs-page.ts from android-tutorial.ts
Here's the only thing I added:
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;
}
});
}