如何在Angular2中使用owlcarousel？

Question

我在angular2新手，我現在想用貓頭鷹旋轉木馬

，我發現這個教程，但它給了我很多的錯誤，我可以找出什麼是一個問題，所以有人可以解釋again.thanks

How to use owl-carousel in Angular2?

這是我的代碼

首頁組件的HTML

<owl-carousel [options]="{navigation: false, pagination: true, rewindNav : false}"> 
    <div *ngFor="let img of images"> 
    <img src="http://lorempixel.com/400/200/{{img}}"/> 
    </div> 
</owl-carousel> 

首頁組件TS

import { Component, OnInit } from '@angular/core'; 
import { OwlCarousel } from '../owl-carousel.component'; 


@Component({ 
selector: 'app-home', 
templateUrl: './home.component.html', 
styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent implements OnInit { 

constructor() { } 

ngOnInit() { 
} 
images: Array<string> = ['sports', 'abstract', 'people', 'transport',  'city', 'technics', 'nightlife', 'animals']; 
} 

我還進口在app.module.ts

owl.component.ts

import { Component, Input, ElementRef, HostBinding } from '@angular/core'; 
import * as $ from 'jquery'; 

import 'owl-carousel'; 

    @Component({ 
selector: 'owl-carousel', 
    template: `<ng-content></ng-content>` 
}) 
export class OwlCarousel { 
@HostBinding('class') defaultClass = 'owl-carousel'; 
@Input() options: object; 

    $owlElement: any; 

    defaultOptions: any = {}; 

    constructor(private el: ElementRef) {} 

    ngAfterViewInit() { 
    // use default - empty 
    // for (var key in this.options) { 
    // this.defaultOptions[key] = this.options[key]; 
    // } 
    this.$owlElement =  $(this.el.nativeElement).owlCarousel(this.defaultOptions); 
} 

    ngOnDestroy() { 
    this.$owlElement.data('owlCarousel').destroy(); 
    this.$owlElement = null; 
    } 
} 

錯誤

Cannot find module 'jquery'. Module not found: Error: Can't resolve 'owl-carousel'

Answer 1

我會建議使用像ng2-bootstrap而不是使用jQuery這個：

長話短說：

1. 安裝

   npm install ng2-bootstrap 
   

2. 進口轉盤模塊：

   import { CarouselModule } from 'ng2-bootstrap'; 
   
   @NgModule({ 
       imports:  [ CarouselModule, ...], 
       declarations: [ AppComponent, ... ], 
       bootstrap: [ AppComponent ] 
   }) 
   

3. 使用它：

   <carousel> 
       <slide> 
       <img src="https://i.ytimg.com/vi/qh7LLydY8eo/maxresdefault.jpg" alt="First slide"> 
       </slide> 
       <slide> 
       <img src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" alt="Second slide"> 
       </slide> 
       <slide> 
       <img src="https://wallpaperbrowse.com/media/images/81.jpg" alt="Third slide"> 
       </slide> 
   </carousel> 
   

這裏是一個工作進展情況：

https://plnkr.co/edit/1NMmcUW1KDnxApnVUz3P?p=preview