IONIC 4：getActiveIndex() 在离子载玻片中不起作用答案

【问题标题】：IONIC 4 : getActiveIndex() is not working in ion-slidesIONIC 4：getActiveIndex() 在离子载玻片中不起作用
【发布时间】：2019-01-05 14:34:12
【问题描述】：

使用 IONIC 4 ion-slides，我正在尝试使用 getActiveIndex() 获取当前单击的 silde 索引，如下所示它不起作用。

<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();
}

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

【问题讨论】：

嗨@Darshana，你找到解决方案了吗？
根据ionicframework.com/docs/api/slides 的文档，您应该可以调用this.slides.getActiveIndex()。这将返回一个包含索引以及其他信息的对象。我现在正在尝试提取价值。如果我设法让它工作，我会报告

标签： ionic-framework ionic4

【解决方案1】：

在模板中

<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);
    });
}

【讨论】：

最好的解决方案！谢谢！ :-)

【解决方案2】：

根据the documentation，getActiveIndex() 返回一个Promise<number>。
所以通过使用ionSlideTap:

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

我找到了两种方法：

正如phunder 建议的那样，您可以使用then() 来检索其值。我也用async/await做到了：

async onSlideTapped(event: any) {
    const index: number = await event.target.getActiveIndex();
    console.log(index);
}

或者您可以使用swiper 对象：

onSlideTapped(event: any) {
    console.log(event.target.swiper.clickedIndex);
}

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

【讨论】：

【解决方案3】：

对于离子 4

*.html

<ion-slides #slides (ionSlideDidChange)="slideChanged(slides)">
  ...
</ion-slides>

*。 ts

 ...
 @ViewChild('slides', { static: false }) slides: IonSlides;
 ...
 slideChanged(slides: IonSlides) {
   slides.getActiveIndex().then((index: number) => {
    console.log(index);
    this.currentIndex = index;
   });
 }

【讨论】：

不工作。请帮助我解决其他问题
我看到了你的帖子，也许你忘记了 slide 的声明，例如 @ViewChild('slides', { static: false }) slides: Ion Slides;
不需要兄弟

【解决方案4】：

我有同样的问题，但设法解决它如下：

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

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

请注意，虽然它似乎可以工作，但我怀疑因为值是在 promise 内部发生变化的，所以它只会在最近没有变化的情况下返回正确的值。因此，我打算通过等待来更新它来解决这个问题。

【讨论】：

你能检查我的解决方案（更正的）是否适合你吗？

【解决方案5】：

更新：

我想我犯了一些错误，这里是工作示例（Ionic 3）。请确保您使用的是 $event。

模板文件：

<ion-slides (ionSlideTap)="getIndex($event)">
 <ion-slide>1</ion-slide>
</ion-slides>

现在在 TS 文件中：

getIndex(event) {
  console.log(event.clickedIndex);
}

试试上面的方法？

这里正在运行 stackblitz：https://stackblitz.com/edit/ionic-ssvout

【讨论】：

我已经尝试过上述方法，但这也不起作用。
美好的一天@sergey，我也尝试过这种方法，但返回的值是“未定义”
@phunder 嘿，我检查了我的答案并更正了它。请参阅stackblitz

【解决方案6】：

1)将id分配给各个like #slides

<div>
   <ion-slides #slide (ionSlideDidChange)="SlideChanges(slide)">

   </ion-slides>
</div>

2) 在 your.ts 页面/组件中导入 IonSlides

从“@ionic/angular”导入 { IonSlides }；

3)。使用方法

SlideChanges(slide: IonSlides) {
   slide.getActiveIndex().then((index: number) => {
    this.yourSlideIndex= index;
       alert(this.yourSlideIndex)
   });
 }

【讨论】：

【解决方案7】：

是的，它正在工作......！

// Typescript
import { IonSlides } from '@ionic/angular';
// in Component Class
export class AppComponent implements OnInit {
  @ViewChild('contentSlider') contentSlider: IonSlides;
  constructor(){}
  ngOnInit() {}
  
  do_getActiveSlide(e: any) {
    this.contentSlider.getActiveIndex().then((index: number) => {
      console.log("Current active slide index", index);
    });
  }
}

div {
  width: 100%;
  height: 5em;
  color: gold;
  background-color: #333;
  margin: 1.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

<ion-slides pager="true" (ionSlideDidChange)="do_getActiveSlide($event)" #contentSlider>
  <ion-slide>
    <div>1</div>
  </ion-slide>
  <ion-slide>
    <div>2</div>
  </ion-slide>
  <ion-slide>
    <div>3</div>
  </ion-slide>
</ion-slides>

【讨论】：