jquery引导在angular2选择传送带图像索引

试图复制这个简单的jquery片段，我从我的旧项目到angular2。基本上选择旋转木马图像索引onclick="" or (click)=""。jquery引导在angular2选择传送带图像索引

在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代码片段相同的功能？

引导选择指定的图像数量Ref

来源

2017-06-20 MrNew

你必须如下使用[(activeSlide)]="activeSlideIndex"。在你的点击事件中设置“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>

来源

2017-06-20 09:46:07

我没有使用ng-bootstrap，我认为你在你的例子中使用了？只是在静态转盘上工作。我在我的问题中添加了一个按钮，我试图实现的功能与https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel_number&stacked=h类似 – MrNew

jquery引导在angular2选择传送带图像索引

回答

相关问题