如何访问 Swiper Angular 组件的虚拟幻灯片方法

Question

我想访问 virtual slides methods of Swiper Angular Component。我需要在幻灯片更改后手动触发组件重新渲染。我想我可以通过调用 mySwiper.virtual.update() 方法来实现这一点。我试图通过@ViewChild装饰器

获得访问权限

   @ViewChild('swiper') swiper: Swiper;  
       ngAfterViewInit(){
       // to see which properties are available
        console.dir(this.swiper);}

但 this.swiper 未定义。

Answer 1

参考此文档Swiper Angular

创建对您的滑动器的引用并且您必须在 AfterViewInit 上实例化滑动器 - your.component.ts

@ViewChild('newSwiper') newSwiper: any;

  constructor() {
  }
  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    console.log(this.newSwiper.swiperRef);
    //Swiper instance will be displayed in console
  }

在您的 HTML 文件中，执行以下操作

<swiper [slidesPerView]="1" #newSwiper> 
//slides here
</swiper>

现在您可以访问 slideTo()、slideNext()、slidePrev() 等属性和方法

this.newSwiper.swiperRef.virtual.update()

希望这会有所帮助。

Answer 2

这是一个例子：

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { SwiperComponent } from "swiper/angular";

@Component({
  selector: "app-swiper-example",
  template: `
    <swiper #swiperRef>
      <ng-template swiperSlide>slide 1</ng-template>
      <ng-template swiperSlide>slide 2</ng-template>
    </swiper>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild("swiperRef", { static: false }) swiperRef: SwiperComponent;

  ngAfterViewInit(): void {
    console.dir(this.swiperRef);
  }
}

如何访问 Swiper Angular 组件的虚拟幻灯片方法

How to access Virtual Slides Methods of Swiper Angular Component

module

swiper

angular

swiperjs