在 Angular 中刷新 owl-carousel

Question

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

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

我在网上发现，你必须按类刷新：

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

但是如何将其翻译成 Angular/Typescipt？

Answer 1

所以，只要您使用ngx-owl-carousel（在您的评论之后），您的实现可能如下所示。

// 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>

请注意owlElement模板变量

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

// Component class

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

export class HomeComponent {

@ViewChild('owlElement') owlElement: OwlCarousel

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

您可以使用方法触发器 (trigger(action: string, options?: any[])) 从 original documentation 调用您想要的任何事件。