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

Issue

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?

Solution

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.

Answered By - jmilloy