如何在Angular2中使用猫头鹰轮播？

更新资料

OwlCarousel2 +
Angular2.3.0

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

旧版

以下是angular2猫头鹰轮播实现的app.ts文件：

import {Component} from 'angular2/core';import { OwlCarousel } from './owl-carousel.component';@Component({  selector: 'app',  directives: [OwlCarousel],  template: `    <h2>Sample 1</h2>    <owl-carousel [options]="{navigation: true, pagination: false, rewindNav : false}">       <div *ngFor="#item of items1">         <p>{{ item }}</p>       </div>    </owl-carousel>    <h2>Sample 2</h2>    <owl-carousel [options]="{navigation: false, pagination: true, rewindNav : false}">       <div *ngFor="#item of items2">         <p>{{ item }}</p>       </div>    </owl-carousel>    <h2>Sample 3</h2>    <owl-carousel [options]="{navigation: false, pagination: true, rewindNav : false}">       <div *ngFor="#img of images">         <img src="http://lorempixel.com/400/200/{{img}}"/>       </div>    </owl-carousel>`})export class App {  items1: array = [1, 2, 3, 4, 5];  items2: array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];  images: array = ['sports', 'abstract', 'people', 'transport', 'city', 'technics', 'nightlife', 'animals'];}

owl-carousel.component.ts

import { Component, Input, ElementRef } from 'angular2/core';import $ from 'jquery';import 'owl-carousel';@Component({  selector: 'owl-carousel',  template: `<ng-content></ng-content>`})export class OwlCarousel {  @Input() options: object;  $owlElement: any;  defaultOptions: object = {};  constructor(private el: ElementRef) {}  ngAfterViewInit() {    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;  }}

您可以在plunker中看到的完整示例

OwlCarousel2
版本在这里https://plnkr.co/edit/FnZVxB?p=preview