在 Angular 中刷新猫头鹰旋转木马

Question

我对猫头鹰旋转木马有一些关于动态变化的问题，例如幻灯片的数量等 - 换句话说，旋转木马在进行一些更改后很容易损坏。

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

我在网上发现必须按课刷新：

$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[])）从

原始文档

调用任何您想要的事件。

Answer 2

以上解决方案都不适合我。

在生产环境中，轮播加载了几秒钟，我也遇到了轮播可扩展性问题。 我设法通过将 carousel 升级到 Angular 17 并以这种方式刷新来解决我的所有问题：

html 模板：

<owl-carousel-o [options]="customOptions" #owlCarouselRef>
      <ng-container *ngFor="let image of imageUrlArray">
        <ng-template carouselSlide>
          <img [ngSrc]="image.url" [alt]="image.url" style="width: 100%; height: 100%;" priority>
        </ng-template>
      </ng-container>
    </owl-carousel-o>
  </div>

ts 控制器：

  @ViewChild("owlCarouselRef") owlCarouselRef: any;

  ngAfterViewInit() {
    this.owlCarouselRef.ngOnInit();
    this.owlCarouselRef.ngAfterContentInit();
  }