离子4: getActiveIndex()不适用于离子幻灯片

Question

使用离子4离子幻灯片，我正在尝试使用getActiveIndex()获得当前点击的淤泥指数，因为它在下面不起作用。

<ion-slides #testSlider (ionSlideTap)="getIndex()">
 <ion-slide>....</ion-slide>
</ion-slides>


@ViewChild('testSlider') slider: ElementRef;  // first way

getIndex() {
     this.slider.nativeElement.getActiveIndex();
}


@ViewChild('testSlider') slider: Slider; //second way

getIndex() {
     this.slider.getActiveIndex();
}

下面的另一种方法也不起作用：

<ion-slides #testSlider (ionSlideTap)="getIndex(testSlider)">
 <ion-slide>....</ion-slide>
</ion-slides>


getIndex(testSlider) {
     testSlider.getActiveIndex();
}

有谁能建议我如何在离子4中获得活动索引或当前单击的幻灯片索引？

Answer 1

我也遇到了同样的问题，但设法解决了以下问题：

export class SomePage implements OnInit {
  ...
  currentIndex:Number = 0;
  ...

  getSlideIndex(){
   this.slides.getActiveIndex().then(
     (index)=>{
       this.currentIndex = index;
    });
  }
  ...
  this.getSlideIndex();
  console.log(this.currentIndex);

注意，虽然它似乎有效，但我怀疑由于该值是在允诺内部更改的，因此只有在最近没有更改的情况下，它才会返回正确的值。因此，我打算对此进行更新，实现一个等待，以解决这一问题。

Answer 2

内模板

<ion-slides pager="true" (ionSlideDidChange)="slideChanged($event)" #slides>
</ion-slides>

在组件中

import { IonSlides } from '@ionic/angular';

@ViewChild('slides', {static: true}) slides: IonSlides;

slideChanged(e: any) {
    this.slides.getActiveIndex().then((index: number) => {
        console.log(index);
    });
}

Answer 3

根据文献资料，getActiveIndex()返回一个Promise<number>。

所以通过使用ionSlideTap

<ion-slides (ionSlideTap)="onSlideTapped($event)">
    ...
</ion-slides>

我找到了两种方法：

• 正如凤头所建议的，您可以使用then()检索其值。我也是用async/await做的： 异步onSlideTapped(事件:任意){ const索引: number =等待event.target.getActiveIndex()；console.log(索引)；}
• 也可以使用swiper对象： 事件(onSlideTapped: any) {onSlideTapped}

因此，您不必侦听每个更改，也不必在组件中导入IonSlides。