在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调用任何事件。