Why is this Swiper onReachEnd callback firing twice in Ionic Slides?

Question

Why is this Swiper onReachEnd callback being executed twice?

I am using Ionic Slides, and my stack has 3 pages: the root page, a primary slides page, and a secondary slides page. The secondary slides page should close when I reach the end:

@Component({
  templateUrl: 'app/secondary-slides.html'
})
export class SecondarySlidesPage {
  sliderOptions = {
    onReachEnd: () => { this.nav.pop(); },
  };

  constructor(private nav: NavController) { }
}

The above works, except that the onReachEnd callback is called twice, so two pages are popped off the stack, closing the secondary slides page and the primary slides page, taking my back to the root page. The primary slides page looks like this:

@Component({
  templateUrl: 'app/slides.html'
})
export class SlidesPage {
  sliderOptions = { };

  constructor(private nav: NavController) { }

  public secondarySlides() {
   this.nav.push(SecondarySlidesPage); 
  }
}

Here's a plunker demonstrating the issue.

How can I avoid popping both pages? If this is a bug, is it in Ionic or in Swiper?

Answer 1

As a workaround I can unset the callback after its first use.

@Component({
  templateUrl: 'app/secondary-slides.html'
})
export class SecondarySlidesPage {
  @ViewChild('slides') slides:Slides;

  sliderOptions = {
    onReachEnd: () => {
      this.slides.slider.params.onReachEnd = undefined;
      this.nav.pop();
    },
  };

  constructor(private nav: NavController) { }
}

What's happening is that when the secondary slides page is removed, the individual slide components are destroyed. This automatically updates the slider object, which is now at a new end slide and fires the callback again. I modified the Ionic slides to remove the rapidUpdate call in Slide.ngOnDestroy, and the issues goes away.

I didn't expect to figure something out so quickly after finally deciding to post a question. Bug report here.

Answer 2

this answer could help someone else

What I did inside the ionSlideReachEnd function, was ask for the var what is inside the for-loop, if it is undefined then return false, and this is the way how the function didn't fire twice at the beginning

Example:

<ion-slides (ionSlideReachEnd)="exampleSlideEnd()">
    <ion-slide *ngFor="let sl of slides">

And in your .ts controller

exampleSlideEnd(){

  if( this.slides == undefined) return false;
  this.callOtherFunction();
}