Как использовать owlcarousel в Angular2?

я новичок в angular2, и теперь я пытаюсь использовать сову карусель

я нашел этот учебник, но он дает мне много ошибок, и я мог понять, в чем проблема, так что может кто-нибудь объяснить еще раз. спасибо

Как использовать owl-carousel в 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>

Главная Компонент ц

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

сова.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;
  }
 }

ошибки

Не удается найти модуль «jquery». Модуль не найден: ошибка: не удается разрешить «сову-карусель»


person lekinio    schedule 15.03.2017    source источник


Ответы (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

person Yaser    schedule 15.03.2017