如何在Angular2中使用owl-carousel以及異步改變內容

Question

我正在嘗試在我的Angular 2應用中實現owl-carousel。

我跟着這個例子How to use owl-carousel in Angular2?，它實際上運行良好，唯一的問題是我的項目是異步變化（ng-content異步變化）。

當我的貓頭鷹的內容發生變化（啓動器或評估者）時，通過在plnkr上實現解決方案，插件不會重新加載。所以我只看到一個項目列表，但它們不滾動。

所以我有NPS-comments.component.html在轉盤組件稱爲：

<section class="purchasers comments" *ngIf="comments.promoters.length || comments.detractors.length"> 
 
    <carousel class="promoters" *ngIf="comments.promoters.length" [options]="{ items: 1 }"> 
 
    <p *ngFor="let promoter of comments.promoters">{{promoter}}</p> 
 
    </carousel> 
 
    <carousel class="detractors" *ngIf="comments.detractors.length" [options]="{ items: 1 }"> 
 
    <p *ngFor="let detractor of comments.detractors">{{detractor}}</p> 
 
    </carousel> 
 
</section>

那麼實際carousel.component.ts

import { 
 
    Component, 
 
    Input, 
 
    ElementRef 
 
} from '@angular/core'; 
 

 
import 'jquery'; 
 
import 'owl-carousel'; 
 

 
@Component({ 
 
    moduleId: module.id, 
 
    selector: 'carousel', 
 
    templateUrl: 'carousel.component.html', 
 
    styleUrls: ['carousel.component.css'] 
 
}) 
 

 
export class CarouselComponent { 
 
    @Input() options: Object; 
 

 
    private $carouselElement: any; 
 

 
    private defaultOptions: Object = {}; 
 

 
    constructor(private el: ElementRef) { } 
 

 
    ngAfterViewInit() { 
 
    for (let key in this.options) { 
 
     if (this.options.hasOwnProperty(key)) { 
 
     this.defaultOptions[key] = this.options[key]; 
 
     } 
 
    } 
 

 
    let outerHtmlElement: any = $(this.el.nativeElement); 
 
    this.$carouselElement = outerHtmlElement.find('.owl-carousel').owlCarousel(this.defaultOptions); 
 
    } 
 

 
    ngOnDestroy() { 
 
    this.$carouselElement.trigger('destroy.owl.carousel'); 
 
    this.$carouselElement = null; 
 
    } 
 
}

這是carousel.component.html：

<div class="owl-carousel owl-theme"> 
 
    <ng-content></ng-content> 
 
</div>

任何幫助將非常感激。 謝謝。

Answer 1

嗨，大家好我分享我的解決方案使用貓頭鷹owl.carousel@2.1.4與角2.0.0 + webpack。

首先你需要通過npm或類似的方式安裝上述^包。 然後 - > npm install imports-loader （對於在組件中使用owl，否則你會得到fn是未定義的......因爲第三方模塊依賴於像$這樣的全局變量或者這是窗口對象...） 。

我使用的WebPack所以這部分是爲用戶的WebPack：

進口裝載機如下：

{test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery'} 

也ü可以使用jQuery作爲（的WebPack）：

var ProvidePlugin = require('webpack/lib/ProvidePlugin'); 

用作插件：

plugins: [ 
     new webpack.ProvidePlugin({ 
      jQuery: 'jquery', 
      $: 'jquery', 
      jquery: 'jquery', 
      'window.jQuery': 'jquery' 
     }) 
    ] 

對於照片裝載機：

{ 
    test: /\.(png|jpe?g|gif|ico)$/, 
    loader: 'file?name=public/img/[name].[hash].[ext]' 
} 

*公共/ IMG - images文件夾

CSS裝載機：

{ 
    test: /\.css$/, 
    include: helpers.root('src', 'app'), 
    loader: 'raw' 
} 

的供應商。js文件應導入以下內容：

import 'jquery'; 
import 'owl.carousel'; 
import 'owl.carousel/dist/assets/owl.carousel.min.css'; 

請注意，owl.carousel 2仍然使用andSelf（）的jQuery棄用功能，所以我們需要後加入的新版本替換它們（） 。

轉到node_modules文件夾中的貓頭鷹包DIST/owl.carousel.js： 取代andSelf（）與所有出現 - >回加（）。

現在是角2部分：

貓頭鷹carousel.ts：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'carousel', 
    templateUrl: 'carousel.component.html', 
    styleUrls: ['carousel.css'] 
}) 
export class Carousel { 
    images: Array<string> = new Array(10); 
    baseUrl: string = './../../../../public/img/650x350/'; 
} 

carousel.component.ts:

import { Component, Input, ElementRef, AfterViewInit, OnDestroy } from '@angular/core'; 

@Component({ 
    selector: 'owl-carousel', 
    template: `<ng-content></ng-content>` 
}) 
export class OwlCarousel implements OnDestroy, AfterViewInit{ 
    @Input() options: Object; 

    $owlElement: any; 

    defaultOptions: Object = {}; 

    constructor(private el: ElementRef) {} 

    ngAfterViewInit() { 
     for (var key in this.options) { 
      this.defaultOptions[key] = this.options[key]; 
     } 
     var temp :any; 
     temp = $(this.el.nativeElement); 

     this.$owlElement = temp.owlCarousel(this.defaultOptions); 
    } 

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

carousel.component.html：

<owl-carousel class="owl-carousel"[options]="{navigation: true, pagination: true, rewindNav : true, items:2, autoplayHoverPause: true, URLhashListener:true}"> 
    <div class="owl-stage" *ngFor="let img of images; let i=index"> 
     <div class="owl-item"> 
      <a href="#"><img src="{{baseUrl}}{{i+1}}.png"/></a> 
     </div> 
    </div> 
</owl-carousel> 

確保引導在app.module一切：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import {OwlCarousel} from './components/carousel/carousel.component'; 
import {Carousel} from './components/carousel/owl-carousel'; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     NgbModule, 
    ], 
    declarations: [ 
     AppComponent, 
     OwlCarousel, 
     Carousel 
    ], 
    providers: [appRoutingProviders], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

現在你可以使用指令/組件在整個應用程序模板/ templateUrl段內，不需要輸入任何東西。

請按照上面的說明，因爲所有步驟都是完成angular 2.0.0 final release和owl.carousel 2.1.4版本之間的集成所必需的。

希望你能與我分享一些代碼來改善功能/兩NG2/OWL2 ...

BR的特點