Мне интересно, как перехватить событие slide.bs.carousel
(загрузочная карусель 3) в Angular 2 и передать его дочернему компоненту?
Это довольно просто в jQuery, и я полагаю, в ng-2, но я не могу найти простое решение.
Мне интересно, как перехватить событие slide.bs.carousel
(загрузочная карусель 3) в Angular 2 и передать его дочернему компоненту?
Это довольно просто в jQuery, и я полагаю, в ng-2, но я не могу найти простое решение.
Прежде всего, чтобы следовать методу 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>
Я бы предложил оболочку 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, обратитесь к этой ссылке. я надеюсь, что это поможет вам