Angular 角度2/4/5中的引导转盘事件处理

我想知道如何捕捉Angular 2中的事件

slide.bs.carousel

（引导3 carousel）并将其传递给子组件

---

在jQuery和ng-2中都非常简单，但我找不到简单的解决方案。

首先，要遵循角度的方式，您需要查看角度引导包装。我投赞成票！将其作为依赖项添加到Angular项目中，然后可以使用

旋转木马模块

（文档为）

您可以使用

activeSlideChange

Angular事件或播放

[（activeSlide）]

模型，而不是

slide.bs.carousel

本机事件。这可以通过设置器中断来实现：

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>

---

我建议使用

ng引导

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>

---

更多API请参考此。我希望它能帮助您

欢迎来到StackOverflow。请添加代码，以演示您尝试完成的任务、尝试的内容以及失败的地方。到目前为止，此

未触发

slide.bs.carousel

。一个选项是移动到Angular 4并使用ng引导。@ConnorsFan仍然具有slide.bs.carousel事件（或应该执行此操作）

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;
  }
}