Angular 2/4/5中的Bootstrap轮播事件处理

Question

我想知道如何slide.bs.carousel在Angular 2中捕获事件(bootstrap 3 carousel)并将其传递给子组件？在jquery中它非常简单,我想在ng-2中也是如此.但我找不到简单的解决方案(.

谢谢.

Answer 1

首先,要遵循Angular方式,您需要查看Angular Bootstrap包装器.我投票给ngx-bootstrap!将它作为依赖项添加到Angular项目中,然后您可以使用CarouselModule(文档在这里).

slide.bs.carousel您可以使用activeSlideChangeAngular事件或使用[(activeSlide)]模型来代替本机事件.这可以通过例如setter中断来完成:

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's 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>