Angular 2/4/5引導傳送帶事件處理

Question

我想知道如何在Angular 2中捕獲事件slide.bs.carousel（bootstrap 3 carousel）並將它傳遞給子組件？ 這在jquery中很簡單，我想在ng-2中也是如此。但我cant't找到簡單的解決方案（

感謝。

Answer 1

首先，遵循角的方式，你需要看的角度引導包裝。我投ngx-bootstrap！將它添加到您的角度項目。作爲一個依賴，那麼你可以使用你會使用activeSlideChange角事件或[(activeSlide)]模型玩CarouselModule（DOC的是here）

而不是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> 

Answer 2

我建議ng-bootstrap角包裝，因爲它包含內置的指令和API，這將有助於管理轉盤狀態，事件和配置。

如果你看看這個link，這將有助於你進一步。

例如

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

在您的打字稿文件

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請參見本link。我希望它能幫助你