1
votes

les méthodes ion-slides ne fonctionnent pas dans ionic 4

Impossible d'utiliser les méthodes fournies par les diapositives ioniques dans la documentation officielle. vérifié d'autres réponses ici mais tout semble confondre ionique 4 avec ionique 3 et fournir des réponses applicables en ionique 3.

Je veux obtenir l'index actif de la diapositive. la documentation en ligne n'est pas complète sur la façon de l'implémenter.

ionic4

0 commentaires

6 Réponses :

1
votes

Construisez le curseur dans votre html avec un ID de diapositive et une fonction qui est émise lorsque la diapositive active a changé.

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

}

Dans le fichier .ts, vous importez l'ID du curseur avec ViewChild et définissez la fonction pour obtenir l'index actif.

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

1 commentaires

getActiveIndex renvoie une promesse. Pour voir l'index réel, utilisez this.slides.getActiveIndex (). Then ((val) => console.log (val));

0
votes

J'ai eu le même problème, mais je l'ai résolu avec le code suivant:

Mon fichier .ts:

<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>

Mon fichier HTML:

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

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

}

0 commentaires

2
votes

Dans ionic 4, le type de retour de la méthode getActiveIndex () est Promise , donc le code que vous utilisiez dans ionic 3 ne fonctionnera plus. Vous pouvez au minimum le changer pour quelque chose comme:

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

Ou tout ce que vous voulez l'utiliser. La documentation officielle est en fait assez géniale à ce sujet: https://ionicframework.com/docs/api/slides

3 commentaires

En fait, le type de retour est nombre plutôt que Promise . Cela a été signalé sur github comme un bogue. github.com/ionic-team/ionic/issues/14918

@SupremeDolphin: Je pense que cela peut être un cas d'informations obsolètes: à partir de la v4.0.0-beta.6, toutes les méthodes de tous les composants ioniques renvoient une promesse. Maintenant, nous pouvons obtenir la valeur appropriée en gérant la promesse ou en utilisant async / await. Si un avait glissé sur le réseau dans les versions précédentes, il a déjà été capturé. Le code que j'ai inclus ci-dessus fonctionne très bien pour moi: Ionic CLI 4.12.0 & @ ionic / angular 4.3.1.

Tu as raison. Lorsque vous importez des Slides au lieu de IonSlides , le type de retour est number . Mais avec IonSlides , c'est une promesse.

0
votes

J'ai résolu le problème comme ceci:

page.ts:

<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>

page.html:

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

...

@ViewChild('slides') slides: IonSlides;


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

exactement la même chose pour l'action de retour

1 commentaires

Je pense que le truc ici est d'importer IonSlides au lieu de Slides . Cela a fonctionné pour moi.

7
votes

Remarque: utilisez IonSlides et n'utilisez pas ElementRef et nativeElement

Suivez simplement le code ci-dessous et cela fonctionnera très bien pour obtenir l'index actif de getActiveIndex () code >

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

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

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

0 commentaires

0
votes

statique: vrai

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

1 commentaires

Bien que ce code puisse répondre à la question, il serait préférable d'inclure un contexte, en expliquant comment il fonctionne et quand l'utiliser. Les réponses basées uniquement sur le code ne sont pas utiles à long terme.