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

Question

我在 Angular 的 Ionic 5 项目中使用 ion-slides。根据 this document I want to get the instance of the Swiper by method getSwiper to use Zoom Methods & Properties

以下是 HTML 代码：

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

我无法在 class 中调用方法 getSwiper。我不知道怎么称呼它。 ion-slides 是否需要使用 ViewChild 或任何 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，也可以在 the events:

中的任何位置使用模板引用传递滑动器

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

牢记 all ionSlides methods return 承诺。

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

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

How to get Swiper instance from getSwiper in Ionic5 and Angular

ionic-framework

angular

swiperjs

ionic5