Блог

Я использую ion-slides в своем проекте Ionic 5 в Angular. В соответствии с этим документом я хочу получить экземпляр Swiper методом by, getSwiper чтобы использовать методы и свойства масштабирования

Ниже приведен HTML-код:

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

Я не могу вызвать метод getSwiper в классе. Я не знаю, как это назвать. Нужно ли мне использовать ViewChild for 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())
  }

}
  

Вы можете использовать ViewChild, как предложил @ihorbond, и вы также можете передать 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 возвращают обещания.

Стековые блоки:https://stackblitz.com/edit/ionic-angular-v5-fsb1bx