Ionic Slides not working properly, after set root (advanced problem)


#1

Hi everyone :slight_smile:

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!