Hi everyone
TLDR: If the app runs and I call setRoot to a page with ion-slides, they don’t work. If I restart the app and call the same setRoot, they work.
I have the following problem. While using my app at one point the user will get to a new page / screen (lets call it segmentPage
). I do this utilizing setRoot. On this page the user has access to slides and segement buttons. These buttons don’t work in conjucntion, when I call setRoot within the app. When they close the app on said segmentPage
, and reopen it, the apps calls it’s reauthenticate
method, which puts the user back to the segmentPage
. Then the slides work.
For reference, here is the code (abbreviated):
segmentPage.html:
<ion-header>
<ion-navbar>
<ion-buttons start>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
{{pageTitle}}
</ion-title>
</ion-navbar>
<ion-toolbar no-border-top class="itemSlides">
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
<ion-segment-button *ngFor="let slide of slides" value="{{slide.id}}">
{{slide.title}}
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)">
<ion-slide *ngFor="let slide of slides">
<ion-list>
<my-component *ngFor="let item of myItems" [item]="item"></my-component>
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
<ion-footer>
<some-button>...</some-button>
</ion-footer>
segmentPage.ts:
import { Component, ViewChild } from '@angular/core';
import { Content, Events, IonicPage, Slides } from 'ionic-angular';
...
@IonicPage()
@Component({
selector: 'page-menu',
templateUrl: 'menu.html',
})
export class MenuPage {
@ViewChild('mySlider') slider: Slides;
@ViewChild(Content) content: Content;
selectedSegment: string;
slides: any;
pageTitle: string = "Segment Page"
constructor() {
this.initializeSlides();
}
private initializeSlides(): void {
this.selectedSegment = SLIDE_ID_1;
this.slides = [
{
id: SLIDE_ID_1,
title: SLIDE_TITLE_1
},
{
id: SLIDE_ID_2,
title: SLIDE_TITLE_2
},
{
id: SLIDE_ID_3,
title: SLIDE_TITLE_3
},
{
id: SLIDE_ID_4,
title: SLIDE_TITLE_4
}
]
}
onSegmentChanged(segmentButton) {
this.content.scrollToTop(0);
const selectedIndex = this.slides.findIndex((slide) => {
return slide.id === segmentButton.value;
});
this.slider.slideTo(selectedIndex);
}
onSlideChanged(slider) {
try {
const currentSlide = this.slides[slider.getActiveIndex()];
this.selectedSegment = currentSlide.id;
}
catch (error) {
console.log(error);
//Slided too far, just do nothing in this case as it is not important
}
}
}
Also, here are the functions in app.component.ts that I use to change root (utilizing events):
private enableMenu(menuId: string): void {
this.menu.enable(true, menuId);
}
private setRootPage(rootPage: string): void {
if(rootPage.includes("Tab")){
let params = { tabIndex: 0};
this.nav.setRoot(rootPage, params).then(() => {
this.nav.getActiveChildNavs()[0].select(0);
});
console.log("'Tabs' in rootPage");
} else {
this.nav.setRoot(rootPage);
}
}
private setRootAndEnableMenu(rootPage: string, menuId: string): void {
this.setRootPage(rootPage);
this.enableMenu(menuId);
}
private startListeningToEvents(): void {
this.events.subscribe(EVENT_CHANGE_ROOT,
(rootPage: string, menuId: string) => {
this.setRootAndEnableMenu(rootPage, menuId);
}
);
}
Other than that my app.component.ts pretty much looks like the one from the ionic conference app.
Any help would be much appreciated!