在 Angular 中刷新猫头鹰轮播 [英] Refresh owl-carousel in Angular

问题描述

我对 owl carousel 有一些关于动态变化的问题，例如幻灯片的数量等 - 换句话说，在一些变化后，carousel 很容易坏掉.

我的方法是重新加载/刷新轮播 - 但如何?

我在网上发现必须按类刷新:

$owl.trigger('refresh.owl.carousel');

但我如何将其转换为 Angular/Typescipt?

解决方案

因此，只要您使用 ngx-owl-carousel(按照您的评论)，您的实现可能如下所示.

//组件模板<owl-carousel [items]="images" #owlElement><div class="item" *ngFor="let image of images;let i = index"><div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center/80px 80px'}"></div>

</owl-carousel>

请注意owlElement模板变量

那么如果你想处理或者触发一些动作可以参考这个元素

//组件类从'ngx-owl-carousel'导入{OwlCarousel}；导出类 HomeComponent {@ViewChild('owlElement') owlElement: OwlCarousel刷新() {this.owlElement.refresh()}}

您可以使用原始文档调用任何您想要的事件方法触发器 (trigger(action: string, options?: any[])).

I have some issues with the owl carousel regarding dynamic changes, such as amount of slides etc. - in other words, the carousel tempts to break after some changes.

My approach was to reload/refresh the carousel - but how?

I found online that you have to refresh it by class:

$owl.trigger('refresh.owl.carousel');

But how do I translate this to Angular/Typescipt?

解决方案

So, as long as you are using ngx-owl-carousel (following your comment) your implementation could look as follows.

// component template

<owl-carousel [items]="images" #owlElement>
     <div class="item" *ngFor="let image of images;let i = index">
         <div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
     </div>
 </owl-carousel>

Please, pay attention to owlElement template variable

Then if you want to handle or trigger some actions you can refer to this element

// Component class

import {OwlCarousel} from 'ngx-owl-carousel';

export class HomeComponent {

@ViewChild('owlElement') owlElement: OwlCarousel

   refresh() {
     this.owlElement.refresh()
   }
}

You can call whatever events you want from original documentation using method trigger (trigger(action: string, options?: any[])).

这篇关于在 Angular 中刷新猫头鹰轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！