如何解决如何在 ngfor 完成后销毁 owl carousel 然后在 agnular 11 中重新初始化它?
我正在使用 owl-carousel。
代码:
<owl-carousel [options]="customOptions" [items]="slidesStore1" >
[carouselClasses]="['owl-theme','sliding']" #owlElement>
<div class="item" *ngFor="let img of slidesStore1;let modelpostion = index" carouselSlide
[id]=img.id >
<img style="height: 260px;width:100%;object-fit: cover;" src='{{"assets/images/" +
img.image}}' [alt]="img.name" [title]="img.name" />
<div class="card-body">
<h5 class="card-title">{{img.name}} </h5>
<p class="card-text">{{img.description}}</p>
</div>
</div>
</owl-carousel>
@ViewChild('owlElement',{ static: true }) owlElement: OwlCarousel;
customOptions: OwlModule = {
loop: false,mouseDrag: true,touchDrag: true,pullDrag: false,dots: false,navSpeed: 700,navText: ['‹','›'],/* animateOut: 'fadeOut',animateIn: 'fadeIn',*/
responsive: {
0: {
items: 1,},400: {
items: 1,740: {
items: 1,940: {
items: 1,}
},nav: true
}
show(id: number,i: number) {
this.owlElement.to([i])
this.owlElement.options = this.customOptions;
this.refresh = true;
}
我已经尝试过获取当前位置:
this.owlElement.$owlChild.$owl.on("changed.owl.carousel",(event: any) => {
this.currentSlideIndex = event.item.index;
}
但是会出现问题,例如第一次单击图像时,模型将打开并且事件发生一次,但是在不单击图像的情况下更改页面时也会发生事件,之后“changed.owl.carousel”事件发生两次,三次。我不明白为什么会这样。
我在谷歌上搜索,但没有得到正确的解决方案。我在谷歌上找到的
“ngfor 完成后,您必须销毁 owl carousel,然后重新初始化它。”
那么如何销毁 owl carousel 并在 .ts 文件中重新初始化它?
我试过这个 this.owlElement.$owlChild.trigger('destroy.owl.carousel');
但没有用。
有人可以建议我如何在 angular 11 中销毁和重新初始化轮播吗?
提前致谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。