I developed an app with an ion-footer at the bottom of each root page :
<ion-footer>
<ipa-footer-buttons></ipa-footer-buttons>
</ion-footer>
The <ipa-footer-button> component is structured as follows:
html:
<ion-toolbar>
<ion-buttons class="footer-buttons">
<!--Main-->
<button ion-button block color="icons-color" (click)="footerClick('MainTabsPage')">
<div [ngClass]="{'active': currentPage == 'MainTabsPage', 'inactive': currentPage != 'MainTabsPage'}">
<ion-icon name="md-home"></ion-icon>
<label class="title-icon-footer">Main Page</label>
</div>
</button>
<button ion-button block color="icons-color" (click)="footerClick('MyAccountTabsPage')">
<div [ngClass]="{'active': currentPage == 'MyAccountTabsPage', 'inactive': currentPage != 'MyAccountTabsPage'}">
<ion-icon name="md-person"></ion-icon>
<label class="title-icon-footer">My Account</label>
</div>
</button>
</ion-buttons>
</ion-toolbar>
component.ts:
constructor(private _app: App) {
this._app.getRootNav().viewDidEnter.subscribe((next: ViewController) => {
this.currentPage = next.name;
})
}
footerClick(page) {
switch (page) {
case 'MainTabsPage'://main page
this._app.getRootNav().setRoot('main-tabs', {tabIndex: 0}, {updateUrl: true});
break;
case 'MyAccountTabsPage':
this._app.getRootNav().setRoot('my-account-tabs', {tabIndex: 0}, {updateUrl: true});
break;
}
}
When navigating from Main page to My account page, I encountered two issues. Firstly, the tabs from the Main page still appeared for 2 seconds on the My Account page. Secondly, the footer buttons lost their color when navigating between them. Normally, the active button should change color to indicate the current page, but in this case, both buttons remained the same color.
Versions used: ionic (Ionic CLI) : 4.0.2 Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.0
If anyone has insights into what might be causing these issues, please let me know!