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

Question

我ion-slides在 Angular 的 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在课堂上调用该方法。我不知道怎么称呼它。我是否需要使用ViewChildforion-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