Обработка событий карусельного бутстрапа в Angular 2/4/5

Ответ 1

Прежде всего, чтобы следовать методу Angular, вам нужно посмотреть на обертки Angular Bootstrap. Я голосую за ngx-bootstrap! Добавьте его в проект Angular в качестве зависимости, а затем вы можете использовать CarouselModule (doc здесь).

Вместо основного события slide.bs.carousel вы должны использовать событие activeSlideChange Angular или играть с моделью [(activeSlide)]. Это можно сделать, например, через прерывание сеттера:

public myInterval: number = 1500;
private _activeSlideIndex: number;

get activeSlideIndex(): number {
  return this._activeSlideIndex;
};

set activeSlideIndex(newIndex: number) {
  if(this._activeSlideIndex !== newIndex) {
    console.log('Active slider index would be changed!');
    // here the place for your "slide.bs.carousel" logic
  }
  this._activeSlideIndex = newIndex;
};

Если шаблон справедлив:

<carousel [interval]="myInterval" [(activeSlide)]="activeSlideIndex">
  <slide *ngFor="let slide of slides">
    <img [src]="slide.image">
  </slide>
</carousel>

Ответ 2

Я бы предложил оболочку ng-bootstrap angular, потому что она содержит встроенные директивы и API, которые помогут управлять состоянием карусели, событиями и конфигурациями.

Если вы посмотрите на ссылку которая поможет вам в дальнейшем.

например

<ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=4" alt="Random first slide">
    <div class="carousel-caption">
      <h3>10 seconds between slides...</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=5"  alt="Random second slide">
    <div class="carousel-caption">
      <h3>No keyboard...</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=6" alt="Random third slide">
    <div class="carousel-caption">
      <h3>And no wrap after last slide.</h3>
      <p>This carousel uses customized default values.</p>
    </div>
  </ng-template>
</ngb-carousel>

В файле TypeScript

import {Component} from '@angular/core';
import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-carousel-config',
  templateUrl: './carousel-config.html',
  providers: [NgbCarouselConfig] // add NgbCarouselConfig to the component providers
})
export class NgbdCarouselConfig {
  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 10000;
    config.wrap = false;
    config.keyboard = false;
  }
}

и более API, обратитесь к этой ссылке. я надеюсь, что это поможет вам