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

问题描述

我在Angular的Ionic 5项目中使用ion-slides。根据{{​​3}}，我想通过方法getSwiper获取Swiper的实例，以使用this document

以下是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事件都可以获取实例？

解决方法

类似这样的东西

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

}

,

您可以按照@ihorbond的建议使用ViewChild，也可以在the events的任何位置使用模板引用传递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)
    })
  }

请记住，all ionSlides methods会返回承诺。

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