如何在getSwiper和Ionic5中获取Swiper实例

Question

我正在使用ion-slides在我的Ionic 5项目的角。根据本文件，我希望获得Swiper方法getSwiper的实例来使用缩放方法与特性

以下是HTML代码：

<ion-slides [options]="slideOpts" zoom>
  <ion-slide>
    <div class="swiper-zoom-container">
      <img [src]=myURL />
    </div>
  </ion-slide>
</ion-slides>

我无法在类中调用方法getSwiper。我不知道怎么叫它。我是否需要将ViewChild用于ion-slides，或者任何IonSlide事件都可以获得实例？

Answer 1

就像这样

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss'],
})
export class DemoComponent implements OnInit, AfterViewInit {
  @ViewChild(IonSlides) slides: any;
  constructor() { }

  ngOnInit() {}

  async ngAfterViewInit() {
    console.log(await this.slides.getSwiper())
  }

}

Answer 2

您可以按照@ihorbond的建议使用ViewChild，也可以在任意一个事件上使用模板引用传递swiper

    <ion-slides #slider [options]="slideOpts" zoom (ionSlideDidChange)="slidesChanged(slider)">
      <ion-slide>
        <div class="swiper-zoom-container">
          <img src="https://picsum.photos/200/300" />
        </div>
      </ion-slide>
      <ion-slide>
        <div class="swiper-zoom-container">
          <img src="https://picsum.photos/200/300" />
        </div>
      </ion-slide>
      <ion-slide>
        <div class="swiper-zoom-container">
          <img src="https://picsum.photos/200/300" />
        </div>
      </ion-slide>
    </ion-slides>

然后在模板中：

  slidesChanged(slider) {
    slider.getActiveIndex().then(index=>{
      console.log(index)
    })
  }

请记住，所有ionSlides方法返回承诺。

Stackblits：https://stackblitz.com/edit/ionic-angular-v5-fsb1bx