尝试将我从旧项目中获得的这个简单的jquery片段复制到angular2中。基本上选择轮播图像索引onclick="" or (click)=""
。
在jQuery中,它简单如下面的代码,但是当我在angular2中做同样的事情时,我得到.carousel()
不是一个函数。我已经导入了jQuery和bootstrap,但下面的代码段似乎并不适用。
// this works on plain jquery
selectImage = function() {
$('#myCarousel').carousel(2)
}
在我的angular2中非常相似: -
import { carousel } from 'bootstrap';
import $ from "jquery";
declare var carousel: any;
// doesn't work shows the error below
selectImage() {
$('#myCarousel').carousel(2);
}
尝试从此div中选择图像
<button (click)="selectImage()"> Select image (2)</button>
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="./assets/imgs/4d4853533136_01-lg.jpg"></div>
<div class="item" data-slide-number="1">
<img src="./assets/imgs/4d4853533136_03.jpg"></div>
<div class="item" data-slide-number="2">
<img src="./assets/imgs/4d4853533136_02.jpg"></div>
<div class="item" data-slide-number="3">
<img src="./assets/imgs/4d4853533136_04.jpg"></div>
</div>
</div>
错误讯息:ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function
问题是如何在angular2中执行与jQuery片段相同的功能?
Bootstrap选择指定的图像编号Ref
答案 0 :(得分:0)
您必须使用[(activeSlide)]="activeSlideIndex"
,如下所示。设置&#34; activeSlideIndex&#34;在您的点击事件或根据要求的任何其他事件
<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
<slide *ngFor="let slide of slides; let index=index">
<img [src]="slide.image">
<div class="carousel-caption">
<h4>Slide {{index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>