[英]jquery bootstrap in angular2 selecting carousel image index
Trying to replicate this simple jquery snippet I have from my old project into angular2. 尝试将我的旧项目中的这个简单jquery代码片段复制到angular2中。 Basically selecting a carousel image index onclick="" or (click)=""
. 基本上选择轮播图片索引onclick="" or (click)=""
。
In jQuery its simple as the code below, however when I do the same in angular2 I get .carousel()
is not a function. 在jQuery中,其简单性如以下代码所示,但是当我在angular2中执行相同操作时,我得到.carousel()
不是函数。 I've imported jQuery and bootstrap but the snippet below doesn't seems want to work. 我已经导入了jQuery和Bootstrap,但是下面的代码段似乎并不想工作。
// this works on plain jquery
selectImage = function() {
$('#myCarousel').carousel(2)
}
in my angular2 its pretty similar:-- 在我的angular2中,它非常相似:
import { carousel } from 'bootstrap';
import $ from "jquery";
declare var carousel: any;
// doesn't work shows the error below
selectImage() {
$('#myCarousel').carousel(2);
}
Trying to select image from this div 尝试从该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 message: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function
错误消息: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function
Question is how can I do the same function as my jQuery snippet in angular2? 问题是如何在angular2中执行与我的jQuery代码片段相同的功能?
Bootstrap select specified image number Ref 引导程序选择指定的映像编号Ref
You have to use [(activeSlide)]="activeSlideIndex"
as below. 您必须使用[(activeSlide)]="activeSlideIndex"
,如下所示。 Set "activeSlideIndex" in your click event Or any other event as per requirement 在点击事件或根据要求的任何其他事件中设置“ activeSlideIndex”
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.