ion-slides 方法在 ionic 4 中不起作用答案

【问题标题】：ion-slides methods not working in ionic 4ion-slides 方法在 ionic 4 中不起作用
【发布时间】：2023-03-24 13:03:01
【问题描述】：

无法使用官方文档中 ion-slides 提供的方法。在这里检查了其他答案，但似乎都将 ionic 4 与 ionic 3 混淆了，并提供了适用于 ionic 3 的答案。

我想获取幻灯片的活动索引。关于如何实现它的在线文档并不完整。

【问题讨论】：

标签： ionic4

【解决方案1】：

注意：使用 IonSlides，不要使用 ElementRef 和 nativeElement

只需按照下面的代码，就可以从getActiveIndex()获取活动索引

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

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

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

【讨论】：

【解决方案2】：

在 ionic 4 中，getActiveIndex() 方法的返回类型为Promise<number>，因此您在 ionic 3 中使用的代码将不再有效。您至少可以将其切换为以下内容：

     this.slider.getActiveIndex()
      .then(activeIndex => {
        console.log('active index = ', activeIndex );
        if (activeIndex < this.slides.length) {
          this.selectedSegment = this.slides[activeIndex ].id;
        }
     });

或者你想用它做什么。官方文档实际上非常棒：https://ionicframework.com/docs/api/slides

【讨论】：

其实返回类型是number而不是Promise<number>。这已在 github 上报告为错误。 github.com/ionic-team/ionic/issues/14918
@SupremeDolphin ：认为这可能是信息过时的情况：从 v4.0.0-beta.6 开始，所有离子组件的所有方法都返回一个承诺。现在，我们可以通过处理 promise 或使用 async/await 来获得适当的值。如果有任何在以前的版本中漏网，那么它们现在已经被捕获了。我上面包含的代码对我来说很好用：Ionic CLI 4.12.0 & @ionic/angular 4.3.1。
你是对的。当您导入 Slides 而不是 IonSlides 时，返回类型为 number。但是对于IonSlides，这是一个承诺。

【解决方案3】：

在您的 html 中使用幻灯片 ID 和活动幻灯片更改时发出的函数构建滑块。

<ion-slides #slides (ionSlideDidChange)="getIndex()">
  <ion-slide></ion-slide>
</ion-slides>

在 .ts 文件中，您使用 ViewChild 导入滑块 ID 并设置函数以获取活动索引。

import { Component, OnInit, ViewChild } from '@angular/core';
import { Slides } from '@ionic/angular';  

export class Page implements OnInit {

  @ViewChild('slides') slides: Slides;

  constructor() {}

  ngOnInit() {
  }

  async getIndex() {
    console.log(await this.slides.getActiveIndex());
  }

}

【讨论】：

getActiveIndex 返回一个 Promise。要查看实际索引，请使用this.slides.getActiveIndex().then( (val) => console.log(val) );

【解决方案4】：

我有同样的问题，但我用以下代码解决了它：

我的 .ts 文件：

export class RegistroPage implements OnInit {
  @ViewChild('registroWizard') registroWizard: IonSlides;
  slideOpts: any;
  constructor() {
    this.slideOpts = {
      effect: 'fade'
    };
  }

  ngOnInit() {
     this.registroWizard.lockSwipeToNext(true);
  }

}

我的 HTML 文件：

<ion-slides #registroWizard pager="true" [options]="slideOpts">
    <ion-slide>
      <h1>Slide 1</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
      <ion-button>Hola</ion-button>
    </ion-slide>
  </ion-slides>

【讨论】：

【解决方案5】：

我解决了这样的问题：

page.ts:

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

...

@ViewChild('slides') slides: IonSlides;


nextSlide() {
    this.slides.slideNext();
}

page.html:

<ion-slides #slides pager="true" [options]="slideOpts">
    <ion-slide>slide 1</ion-slide>
    <ion-slide>slide 2</ion-slide>
</ion-slides>

<ion-button (click)="nextSlide()" class="register-buttons">go next</ion-button>

后退动作也一样

【讨论】：

我认为这里的技巧是导入IonSlides 而不是Slides。这对我有用。

【解决方案6】：

静态：真

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

【讨论】：

虽然这段代码可以回答这个问题，但最好包含一些上下文，解释它是如何工作的以及何时使用它。从长远来看，纯代码的答案没有用处。

【解决方案7】：

你需要声明类到 app.module.ts

@NgModule({
  declarations: [MySliderComponent]
})

【讨论】：

【解决方案8】：

我使用 IonSlides 作为类型，但它没有帮助。对我来说，上述解决方案不起作用（离子 v6.17.1）。有效的是：

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

swipeRight() {
this.slides.nativeElement.slideNext();

所有方法都以这种方式工作。更改 ```{static: true} 没有抛出任何错误如果在将幻灯片声明为 IonSlides 类型后使用 console.log，它会显示 ElementRef 类型

【讨论】：