Angular bootstrap Carousel- 如何在 angular 组件中移动到 ng-bootstrap carousel 的下一张图片？

Question

我正在使用带有 Angular 7 的 ng-bootstrap 插件来创建轮播。以下是 HTML:

<ngb-carousel *ngIf="images" (slide)="onSlide($event)">
  <ng-template ngbSlide *ngFor="let image of images">
    <img [src]="image" alt="Random slide">
    <div class="carousel-caption">
      <h3>{{image.id}}</h3>
    </div>
  </ng-template>
</ngb-carousel>

我的组件中有 onSlide 函数：

onSlide(e){
 if(/*Some condition*/){
    //how to move to next image here?
  }
}

如评论中所述，在 onSlide 函数中，我想根据某些条件移动到下一张图片。如何在if条件下移动到下一张图片？

我通过 ng-bootstarap 引用了 official documentation。他们在那里提到了 next() 方法。但我确定如何使用那个。任何帮助将不胜感激。

Answer 1

从 ngb-carousel 获取模板引用，并将其提供给 onSlide 函数：

<ngb-carousel #caro *ngIf="images" (slide)="onSlide($event, caro)">

在特定条件下调用 caro.next()：

onSlide(e, caro){
  if(/*Some condition*/){
    caro.next()
  }
}

小心它可能陷入无限循环，因为 next() 调用了 (slide) 事件。

Angular bootstrap Carousel- 如何在 angular 组件中移动到 ng-bootstrap carousel 的下一张图片？

Angular bootstrap Carousel- How to move to next image of ng-bootstrap carousel in an angular component?

carousel

ng-bootstrap

angular