Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)
Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Pro services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Pro support portal (http://support.ionicjs.com)
Ionic version: (check one with “x”)
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
2.x
3.x
4.x
I’m submitting a … (check one with “x”)
bug report
feature request
Please do not submit support requests or “How to” questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
My homepage (homeTabsPage) consists of a side menu and tabs, one of the pages accessible by the menu (CompetitionTabsPage) is itself composed of tabs. The worry is that when I try to access this second page (competitionTabsPage) via the menu, ionic loads the first view of the previous page (homePage) instead of the first page of the tabs (CompetitionPage)
Expected behavior:
Steps to reproduce:
Create a homePage with tabs and side menu, create a link in the menu to redirect on an other page with tabs. Navigate with nav.setRoot(PAGE)
Related code:
Architecture Code
pages:
- tabs:
-- home-tabs
-- competition-tabs
- articles:
-- home
-rugby:
--competition
Here a picture of url’s homePage (HomeTabs) et when I try to access the CompetitionPage (CompetitionTabs)
I’ve already tried to add “#home” and “#competitionTabs” in home-tabs and competition-tabs but with a ViewChild to preselect the tab without result.
Other information:
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
@ionic/app-scripts : 2.1.4
Cordova Platforms : none
Ionic Framework : ionic-angular 3.6.1
System:
Android SDK Tools : 25.2.4
ios-deploy : 1.9.1
ios-sim : 5.0.13
Node : v7.5.0
npm : 5.4.2
OS : macOS High Sierra
Xcode : Xcode 9.0 Build version 9A235
Misc:
backend : pro
For more precision, I load data in the Tab to custom them with a picture, like this :
competition-tabs
@IonicPage({
//segment: 'competition-tabs/:id'
})
@Component({
selector: 'page-competition-tabs',
templateUrl: 'competition-tabs.html'
})
export class CompetitionTabsPage {
@ViewChild('competitionTabs') tabCompetition: Tabs;
competitionPageRoot = 'competition'
competitionRankingPageRoot = 'CompetitionRankingPage'
competitionResultsPageRoot = 'CompetitionResultsPage'
competitionCalendarPageRoot = 'CompetitionCalendarPage'
// Données
//name: string;
modal: boolean;
competition: any;
// Paramètres d'affichage
competitionHasRanking: boolean;
competitionHasResults: boolean;
competitionHasCalendar: boolean;
/**
* Constructor
*
* @param navCtrl
* @param navParams
* @param competitionProvider
* @param viewCtrl
*/
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public competitionProvider: CompetitionProvider,
public viewCtrl: ViewController,
) {
this.modal = this.navParams.get('modal');
}
/**
* Chargement des tabs
*/
ionViewCanEnter(): Promise <any> {
return new Promise((resolve, reject) => {
return this.competitionProvider.get(this.navParams.get('id'), {data: 'infos'}).subscribe((response) => {
//this.name = response.data.competition.name;
this.competition = response.competition;
this.competitionHasRanking = response.competition.has_ranking;
this.competitionHasResults = response.competition.has_results;
this.competitionHasCalendar = response.competition.has_calendar;
resolve();
},
error => {
console.log(error);
reject();
});
});
}
/**
* Petit hack pour placer le logo de la compétition dans les tabs
*/
ionViewDidEnter() {
this.tabCompetition.select(0);
setTimeout(() => {
let element = document.querySelectorAll('.ion-md-competition-custom');
let parent = element[0].parentNode;
element[0].parentNode.removeChild(element[0]);
let img = document.createElement("img");
img.setAttribute("class", "tab-icon-custom tab-button-icon icon icon-md");
img.setAttribute("src", this.competition.fullLogo);
parent.insertBefore(img, parent.firstChild);
}, 500)
}
/**
* Fermeture de la modale
*/
closeCompetition() {
this.viewCtrl.dismiss();
}
competition-tabs.html:
<ion-header>
<ion-navbar hideBackButton="false">
<ion-buttons start>
<button ion-button icon-only (click)="closeCompetition()" *ngIf="modal">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<button ion-button menuToggle *ngIf="!modal">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ competition.name }}</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs #competitionTabs>
<ion-tab [root]="competitionPageRoot" [rootParams]="{'id': competition.id, 'competition': competition, 'modal': modal}" tabTitle="{{ competition.name }}" tabIcon="competition-custom" #competitionTabsPage></ion-tab>
<ion-tab [root]="competitionCalendarPageRoot" [rootParams]="{'id': competition.id, 'competition': competition, 'modal': modal}" tabTitle="Calendrier" tabIcon="calendar" *ngIf="competitionHasCalendar" #competitionTabsCalendarPage></ion-tab>
<ion-tab [root]="competitionResultsPageRoot" [rootParams]="{'id': competition.id, 'competition': competition, 'modal': modal}" tabTitle="Résultats" tabIcon="stopwatch" *ngIf="competitionHasResults" #competitionTabsResultsPage></ion-tab>
<ion-tab [root]="competitionRankingPageRoot" [rootParams]="{'id': competition.id, 'competition': competition, 'modal': modal}" tabTitle="Classement" tabIcon="list-box" *ngIf="competitionHasRanking" #competitionTabsRankingPage></ion-tab>
</ion-tabs>
PS : I’ve also published this message on Ionic Repo because I think it’s a bug. If someone has already encountered this bug and found a solution to correct it, I am a taker =)
Thanks a lot,
Regards.