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選擇傳送帶圖像索引

回答

相關問題