离子4幻灯片到下一页 [英] ionic4 slide to next

问题描述

我想手动移动到下一张幻灯片，但遇到错误。 我试过这样：

<ion-slides #sliderRef pager="true" (ionSlideWillChange)="onSlideChangeStart($event)">
<ion-button (click)="slideNext()">Next</ion-button>

和ts文件中：

import { Component, OnInit,  ViewChildren, ElementRef } from '@angular/core';
import { IonSlides } from '@ionic/angular';

export class AppointmentPage implements OnInit {
    @ViewChild('sliderRef', { static: true }) protected slides: ElementRef<IonSlides>;

constructor(){}

    async slideNext(): Promise<void> {
         await this.slides.nativeElement.slideNext();
    }
...
}

通过调用lideNext()，我出现以下错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'slideNext' of undefined

推荐答案

在您的.TS中

moveToNext(slides){
    console.log(slides);
    slides.slideNext()
}

在您的html中

   <ion-slides pager="true" #theSlides>
        <ion-slide >
         <ion-button (click)="moveToNext(theSlides)">Click to go to next</ion-button>   // user click event to go to next slide    
        </ion-slide>
       <ion-slide >
         <ion-button (click)="moveToNext(theSlides)">Click to go to next</ion-button>   // user click event to go to next slide    
        </ion-slide>
     </ion-slides>

这篇关于离子4幻灯片到下一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！