如何在 slider 的末尾创建一个按钮，该按钮可以更改并显示 Ionic 4 中的下一张幻灯片？

Question

我正在尝试在 slider 下添加一个按钮，当按下该按钮时，应该将我移动到 slider 上的下一张幻灯片。 在最后一张幻灯片上，我希望更改按钮。 我已经尝试了几个函数，如 Swipenext 和 nex 函数，但它仍然无法正常工作，我收到了很多错误。 当我按下页面末尾的下一个按钮到 go 到下一张幻灯片时，我在控制台上收到两个错误并且该按钮不起作用。 一个错误指出“无法读取未定义的属性'getactiveindex'”，这是.ts文件中下一个function的一部分，在本地终端上没有错误并且编译成功。 我也在尝试更改最后一张幻灯片中的文本，我尝试了 ionslidechange() function 但它不起作用

home.html
<ion-content>
    <ion-row>  
        <ion-col>

    <div class="ion-text-right">

        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>

          <ion-title>
              <ion-button  routerDirection="root" [routerLink]="['/home-ar']">
           العربية
          </ion-button>
          </ion-title>

        </ion-buttons>

        </div>
      </ion-col>
    </ion-row>
    <ion-slides 
    [options]="slideOpts" autoplay="false"  (ionSlideDidChange)="ionSlideChange(slides)" pager>
      <ion-slide>
          <ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
          <div class="-color1">
          <h1>Hi, Welcome!</h1>
          </div>
          <H3>The new generation of mobile wallets. Send and receive payments all around the world through your mobile phone.</H3>
      </ion-slide>
      <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
              <h1>Slide 4</h1>
            </ion-slide>
            <ion-slide>
                <h1>Slide 5</h1>
              </ion-slide>
    </ion-slides>
    <ion-button 
     expand="full" 
     color="Blue" 
     size="large" 
     (click)="next()">
     <div class="parent">  {{buttonName}}  </div>
    </ion-button>
  </ion-content>

home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';



@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  @ViewChildren('slides') slides: IonSlides;
  buttonName = "Next";
  selectedSlide :any;
  slideOpts = {
    loop: true,
    autoplay: true
  };


  constructor() {}

  ionSlideChange(slides){
    this.selectedSlide = slides;

    slides.getActiveIndex().then(
   (slidesIndex)=>{
            if (slidesIndex == 5){
              this.buttonName = "Continue";
            } else{
              this.buttonName = "Next";
        }
      });
  }

  next(){
    this.selectedSlide.getActiveIndex().then((slidesIndex) => {
      if(slidesIndex == 5){
        console.log("Done Slider");
      } else {
        this.selectedSlide.slideNext();
      }
    });
  }
}


 Console when I press the next button

 ERROR TypeError: slides.getActiveIndex is not a function
    at HomePage.ionSlideChange (home.page.ts:29)
    at Object.eval [as handleEvent] (HomePage.html:22)
    at handleEvent (core.js:38098)
    at callWithDebugContext (core.js:39716)
    at Object.debugHandleEvent [as handleEvent] (core.js:39352)
    at dispatchEvent (core.js:25818)
    at core.js:37030
    at HTMLElement.<anonymous> (platform-browser.js:1789)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
View_HomePage_0 @ HomePage.html:21
proxyClass @ compiler.js:19436
logError @ core.js:39651
handleError @ core.js:9162
dispatchEvent @ core.js:25822
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
emit @ core-ca0488fc.js:1999
(anonymous) @ swiper.bundle-ccdaac54.js:1078
(anonymous) @ swiper.bundle-ccdaac54.js:1077
emit @ swiper.bundle-ccdaac54.js:1071
transitionEnd$1 @ swiper.bundle-ccdaac54.js:1906
slideTo @ swiper.bundle-ccdaac54.js:1994
init @ swiper.bundle-ccdaac54.js:3919
Swiper @ swiper.bundle-ccdaac54.js:3762
initSwiper @ ion-slide_2-md.entry.js:231
async function (async)
initSwiper @ ion-slide_2-md.entry.js:229
(anonymous) @ ion-slide_2-md.entry.js:71
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
nextTick @ core-ca0488fc.js:156
(anonymous) @ core-ca0488fc.js:95
(anonymous) @ core-ca0488fc.js:1219
then @ core-ca0488fc.js:1341
scheduleUpdate @ core-ca0488fc.js:1219
schedule @ core-ca0488fc.js:1764
initializeComponent @ core-ca0488fc.js:1775
async function (async)
initializeComponent @ core-ca0488fc.js:1713
(anonymous) @ core-ca0488fc.js:1851
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
resolvePromise @ zone-evergreen.js:791
(anonymous) @ zone-evergreen.js:707
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1
HomePage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}

Answer 1

好吧，伙计们，我犯了一个非常愚蠢的错误。 我应该在 html 页面的 ionslides 中添加#slides。 我希望这对其他人有帮助

     home.html

<ion-content>
<ion-row>  
    <ion-col>

<div class="ion-text-right">

    <ion-buttons slot="start">
        <ion-back-button></ion-back-button>

      <ion-title>
          <ion-button  routerDirection="root" [routerLink]="['/home-ar']">
       العربية
      </ion-button>
      </ion-title>

    </ion-buttons>

    </div>
  </ion-col>
</ion-row>
<ion-slides 
#slides [options]="slideOpts" autoplay="false" 

      (ionSlideDidChange)="ionSlideChange(slides)" pager>
      <ion-slide>
          <ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
          <div class="-color1">
          <h1>Hi, Welcome!</h1>
          </div>
          <H3>The new generation of mobile wallets. Send and receive payments all 
      around the world through your mobile phone.</H3>
      </ion-slide>
      <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
              <h1>Slide 4</h1>
            </ion-slide>
            <ion-slide>
                <h1>Slide 5</h1>
              </ion-slide>
    </ion-slides>
    <ion-button 
     expand="full" 
     color="Blue" 
     size="large" 
     (click)="next()">
     <div class="parent">  {{buttonName}}  </div>
    </ion-button>
  </ion-content>

home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';



@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  @ViewChildren('slides') slides: IonSlides;
  buttonName = "Next";
  selectedSlide :any;
  slideOpts = {
    loop: true,
    autoplay: true
  };


  constructor() {}

  ionSlideChange(slides){
    this.selectedSlide = slides;

    slides.getActiveIndex().then(
   (slidesIndex)=>{
            if (slidesIndex == 5){
              this.buttonName = "Continue";
            } else{
              this.buttonName = "Next";
        }
      });
  }

  next(){
    this.selectedSlide.getActiveIndex().then((slidesIndex) => {
      if(slidesIndex == 5){
        console.log("Done Slider");
      } else {
        this.selectedSlide.slideNext();
      }
    });
  }
}