单击时的离子幻灯片转到某些幻灯片

Question

我使用了 ionic 4 幻灯片。

 <ion-slides pager="false">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide (click)="next(slides, 5)">
        <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>

在 ts 文件中我使用了以下代码。

next(slide, index) {
this.slides.slideTo(index)
}

点击事件运行良好。单击后幻灯片停止。我从以下位置找到了此修复程序。

https://forum.ionicframework.com/t/jump-to-an-specific-slide-with-ion-slides-component/48840/5

我该如何解决这个问题？？

Answer 1

认为您缺少模板引用变量#slides

 <ion-slides pager="false" #slides >
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide (click)="next(slides , 4)">
        <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>

和.ts

next(slide, index) {
    slide.slideTo(index)
}

第二种方式

cmd（在项目中）-

npm i @ionic/angular

.html-

  <ion-slides pager="false">
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide (click)="next(4)">
            <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>

.ts -

import {IonSlides} from '@ionic/angular';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
      @ViewChild(IonSlides) slides: IonSlides;


next( index) {
    this.slides.slideTo(index)
}
}