[英]How to use owl-carousel in Angular2 with async change ng-content
我正在嘗試在我的 Angular 2 應用程序中實現 owl-carousel。
我跟着這個例子How to use owl-carousel in Angular2? 它實際上很好地解決了我的項目是異步更改(ng-content 異步更改)的唯一問題。
當我的 owl-courosel 的內容發生變化(推薦者或批評者)時,通過在 plnkr 上實施解決方案,插件不會重新加載。 所以我只看到一個項目列表,但它們不滾動。
所以我有 nps-comments.component.html ,其中調用了 carousel 組件:
<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>
任何幫助將不勝感激。 謝謝。
我正在分享我將 owl.carousel@2.1.4 與 angular 2.0.0 + webpack 一起使用的解決方法。
首先,您需要通過 npm 或類似方式安裝上述 ^ 包。
然后 --> npm install import-loader
(對於在組件中使用 owl 否則你將得到函數未定義。因為第三方模塊依賴於全局變量,如 $ 或 this 作為窗口對象。)。
我正在使用 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]'
}
*public/img -- 圖片文件夾
CSS加載器:
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
vendor.js 文件應導入以下內容:
import 'jquery';
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.min.css';
請注意,owl.carousel 2 仍然使用和Self () 棄用的jQuery 函數,因此我們需要將它們替換為新版本的addBack ()。
轉到 owl 包 dist/owl.carousel.js 中的 node_modules 文件夾:將所有出現的andSelf () 替換為 --> addBack ()。
現在是角度 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 { }
現在您可以在整個應用程序的 template/templateUrl 部分中使用指令/組件,無需導入任何內容。
請遵循以上步驟,因為要完成 angular 2.0.0 最終版本和 owl.carousel 2.1.4 版本之間的集成,所有步驟都是必需的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.