i followed this article to combine sidemenu and Tabs pages.
the app.html has my menu. i have with #nav bind the ion-nav to [Content] of my ion-menu.
in my app.component.ts i have click Events. they set different Tabs pages as root and there is one normal page.
this looks like this:
@ViewChild('nav') nav: NavController;
public OnInformationClicked(): void {
this.nav.setRoot("InfoTabsPage");
}
public OnManagementClicked(): void {
this.nav.setRoot("ManagementTabsPage");
}
//some other Tabs pages
//the normal page
public OnFaqClicked(): void {
this.nav.setRoot("FaqPage");
}
in my tabs pages i'm using [selectedIndex] like this:
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-tabs [selectedIndex]="0">
<ion-tab [root]="contactPersonRoot" tabTitle="{{tabs1Name}}" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="contactSupportRoot" tabTitle="{{tabs2Name}}" tabIcon="information-circle"></ion-tab>
</ion-tabs>
but it is not working.
Problem: when i open my menu and change the tabs pages, i can see, how the tabs changed and the right tab Icon is selected, but the Content over the tabs doesn't changed. if i going to the normal page, this is displayed correctly. if i going to a Tabs page from the normal page, then the Tabs page is displayed correctly. if i'm trying to go back to another tabs page. it doesn't changed all content again.
i tried .... MyTabs.select(0). same issue.
i'm currently tesing with ionic serve.
"ionic-angular": "3.9.2",
"ionicons": "4.1.2",
"@angular/animations": "6.0.3",
"@angular/common": "6.0.3",
"@angular/compiler": "6.0.3",
"@angular/compiler-cli": "6.0.3",
"@angular/core": "6.0.3",
"@angular/forms": "6.0.3",
"@angular/http": "6.0.3",
"@angular/platform-browser": "6.0.3",
"@angular/platform-browser-dynamic": "6.0.3",
"@ionic-native/app-version": "^4.10.0",
"@ionic-native/background-mode": "^4.10.0",
"@ionic-native/camera": "^4.10.0",
"@ionic-native/core": "4.7.0",
"@ionic-native/in-app-browser": "^4.9.1",
"@ionic-native/network": "^4.7.0",
"@ionic-native/splash-screen": "4.7.0",
"@ionic-native/status-bar": "4.7.0",
"@ionic/storage": "^2.1.3",
anyone an idea, what's going wrong?
UPDATE
after try and error coding, changed from [selectedIndex]="0" back to myTabs.select(0) in the .ts file of the tabs page like in the article. this not working. but i made a timeout around like so:
ionViewDidLoad() {
let _self = this;
setTimeout(function(){
_self.tabRef.select(0);
},100);
}
now i can see, the content over the tabs replaced correctly. but it looks not like a good workaround, because now i see that the old content is loading before the replacement by select. if i open tabspage 2 now, i can see from tabspage 1 is the content behind tab 1 rendered (ionViewDidLoad, ionViewWillEnter... of tab 1 is executing). then after selecting is done, tab 1 of tabspage 2 is rendering.
UPDATE 2
app.html:
<ion-menu [content]="nav">
<ion-header>
<ion-toolbar>
<ion-title>{{menuTitle}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item (click)="OnInformationClicked()">
<ion-icon name="information" item-start color="primary"></ion-icon>
<ion-label>Info</ion-label>
</button>
<button ion-item (click)="OnManagementClicked()">
<ion-icon name="build" item-start color="primary"></ion-icon>
<ion-label>Manage</ion-label>
</button>
<button ion-item (click)="OnRealisationClicked()">
<ion-icon name="clipboard" item-start color="primary"></ion-icon>
<ion-label>Real</ion-label>
</button>
<button ion-item (click)="OnContactClicked()">
<ion-icon name="contact" item-start color="primary"></ion-icon>
<ion-label>Contact</ion-label>
</button>
<button ion-item (click)="OnFaqClicked()">
<ion-icon name="help" item-start color="primary"></ion-icon>
<ion-label>FAQ</ion-label>
</button>
<button ion-item (click)="OnLogoutClicked()">
<ion-icon name="log-out" item-start color="primary"></ion-icon>
<ion-label>Logout</ion-label>
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #nav [swipeBackEnabled]="false"></ion-nav>
app.component.ts
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild('nav') nav: NavController;
public menuTitle: string = GlobalHelper.GetResources().Application.Menu.Menu;
rootPage: any = HomePage;
constructor(private _css: ClientServerProvider, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
private _backgroundMode: BackgroundMode, private _appProvider: AppProvider) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
_backgroundMode.enable();
});
}
public OnInformationClicked(): void {
this.nav.setRoot("InfoTabsPage");
}
public OnManagementClicked(): void {
this.nav.setRoot("ManagementTabsPage");
}
public OnRealisationClicked(): void {
this.nav.setRoot("RealisationTabsPage");
}
public OnContactClicked(): void {
this.nav.setRoot("ContactTabsPage");
}
public OnFaqClicked(): void {
this.nav.setRoot("FaqPage");
}
public OnLogoutClicked(): void {
this._css.Logout().then(loggedOut => {
if (loggedOut) {
this._appProvider.InitApplication();
}
});
}
}
for example one of the Tabs pages (the others are like this):
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-tabs #myTabs>
<ion-tab [root]="preparationRoot" tabTitle="{{tabs1Name}}" tabIcon="browsers"></ion-tab>
<ion-tab [root]="processRoot" tabTitle="{{tabs2Name}}" tabIcon="logo-buffer"></ion-tab>
<ion-tab [root]="complaintRoot" tabTitle="{{tabs3Name}}" tabIcon="bulb"></ion-tab>
</ion-tabs>
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, MenuController, Tabs } from 'ionic-angular';
import { GlobalHelper } from '../../../../helper/globalHelper';
@IonicPage()
@Component({
selector: 'page-realisation-tabs',
templateUrl: 'realisation-tabs.html'
})
export class RealisationTabsPage {
@ViewChild('myTabs') tabRef: Tabs;
preparationRoot = 'PreparationPage';
processRoot = 'ProcessPage';
complaintRoot = 'ComplaintPage';
tabs1Name = GlobalHelper.GetResources().Application.Features.Realization.Preperation_Page_Header;
tabs2Name = GlobalHelper.GetResources().Application.Features.Realization.Process_Page_Header;
tabs3Name = GlobalHelper.GetResources().Application.Features.Realization.Complaint_Page_Header;
constructor(public menuCtrl: MenuController, public navCtrl: NavController) {
}
ionViewDidLoad() {
// after OnRealisationClicked
/*
*
* with this workaround, Tabs changed, content (subpage) changed, correct * tab is active, but before the subpage changed to correct one, the previous
* subpage is loading , nearly the result of the guide in the article
let _self = this;
setTimeout(function () {
_self.tabRef.select(0);
}, 100);*/
// this is the variant of the article, without timeout
//only Tabs are changed and the correct tab Icon is active and selected
// but content (subpage) is not changed, it is still the first subpage
//of the previous tabspage
this.tabRef.select(0);
}
}
Workflow (without the timeout workaround):
- after Login HomePage as root is replaced with RealisationTabsPage, Tab 1 subpage (preparation) is loaded
- open Menu Click on a menu Point, which open another Tabs page, for example contacttabspage
- Tabs of the contacttabspage are loaded. tab 1 of this Tabs is selected and active. but the subpage behind tab 1 of contacttabspage is still the subpage from realisationtabspage (preparation).
- now i'm open menu and going to a None Tabs page (FAQ). FAQ is correctly rendered.
- open menu: i'm going to a Tabs page, never mind which Tabs page (Realization, contact, info, mangement...), Tabs page rendered correctly.
- now i'm going from this tabspage to another tabspage , so there is the issue again. i'm see the previous subpage of the previous tabspage.
if i'm using instead of using the select() function there is the same issue.
