如何解决如何访问 Swiper Angular 组件的虚拟幻灯片方法
我想访问 virtual slides methods 的 Swiper Angular Component。我需要在幻灯片更改后手动触发组件重新渲染。我想我可以通过调用 mySwiper.virtual.update()
方法来实现这一点。我试图通过@ViewChild 装饰器获得访问权限
@ViewChild('swiper') swiper: Swiper;
ngAfterViewInit(){
// to see which properties are available
console.dir(this.swiper);}
但是 this.swiper 是未定义的。
解决方法
请参阅此文档 Swiper Angular
创建对您的 swiper 的引用 & 您必须在 AfterViewInit - your.component.ts 上实例化 swiper
@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()
希望这会有所帮助。
,这是一个例子:
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);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。