如何在Angular2中使用owlcarousel？

问题描述：

我在angular2新手，我现在想用猫头鹰旋转木马如何在Angular2中使用owlcarousel？

，我发现这个教程，但它给了我很多的错误，我可以找出什么是一个问题，所以有人可以解释again.thanks

这是我的代码

首页组件的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'

答

我会建议使用像ng2-bootstrap而不是使用jQuery这个：

长话短说：

安装
```
npm install ng2-bootstrap 
```

进口转盘模块：

import { CarouselModule } from 'ng2-bootstrap'; 

@NgModule({ 
    imports:  [ CarouselModule, ...], 
    declarations: [ AppComponent, ... ], 
    bootstrap: [ AppComponent ] 
})

使用它：

<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

如何在Angular2中使用owlcarousel？

相关推荐