为什么这个 Swiper onReachEnd 回调在 Ionic Slides 中触发两次？

Question

为什么这个 Swiper onReachEnd 回调被执行了两次？

我正在使用 Ionic Slides，我的堆栈有 3 个页面：根页面、主幻灯片页面和辅助幻灯片页面。当我到达末尾时，辅助幻灯片页面应该关闭：

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

  constructor(private nav: NavController) { }
}

上面的工作，除了 onReachEnd 回调被调用两次，所以两个页面从堆栈中弹出，关闭辅助幻灯片页面和主要幻灯片页面，将我带回根页面。主要幻灯片页面如下所示：

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

  constructor(private nav: NavController) { }

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

这里 plunker 演示了这个问题。

如何避免弹出两个页面？如果这是一个错误，是在 Ionic 中还是在 Swiper 中？

Answer 1

作为解决方法，我可以在第一次使用后取消设置回调。

@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) { }
}

发生的事情是，当删除辅助幻灯片页面时，单个幻灯片组件将被销毁。这会自动更新 slider 对象，该对象现在位于新的结束幻灯片并再次触发回调。我修改了 Ionic 幻灯片以删除 Slide.ngOnDestroy 中的 rapidUpdate 调用，问题就消失了。

我没想到在最终决定 post 一个问题后这么快就弄明白了。 Bug report here.

Answer 2

这个答案可以帮助其他人

我在 ionSlideReachEnd 函数中所做的是询问 for 循环中的 var，如果它未定义则 return false，这就是函数的方式一开始没有开火两次

示例：

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

并在您的 .ts 控制器中

exampleSlideEnd(){

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

为什么这个 Swiper onReachEnd 回调在 Ionic Slides 中触发两次？

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

swiper

ionic-framework

ionic2

angular