Угловая загрузочная карусель - Как перейти к следующему изображению ng-bootstrap Carousel в угловом компоненте? - PullRequest
0 голосов
/ 13 февраля 2019

Я использую плагин ng-bootstrap с Angular 7 для создания карусели.Ниже приведен 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.Там упоминается метод next ().Но я уверен, как использовать это.Любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 13 февраля 2019

получить ссылку на шаблон из ngb-carousel и передать ее функции onSlide:

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

вызов caro.next() при определенном условии:

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

Будьте осторожныможет попасть в бесконечный цикл, поскольку next() вызывает событие (slide).

...