3

Angular 2 アプリに owl-carousel を実装しようとしています。

私はこの例に従いました Angular2でフクロウカルーセルを使用する方法? 実際には、アイテムが非同期変更 (ng-content async change) であるという唯一の問題でうまく機能します。

owl-courosel の内容が変更された (推奨者または批判者) ときに 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>

どんな助けでも本当に感謝しています。ありがとうございました。

4

1 に答える 1

2

angular 2.0.0 + webpackでowl owl.carousel@2.1.4を使用する回避策を共有しています。

最初に、npm などを介して上記のパッケージをインストールする必要があります。

次に --> npm install imports-loader

(コンポーネント内で owl を使用する場合、それ以外の場合は function is undefined になります。サードパーティのモジュールは $ などのグローバル変数に依存しているため、または this がウィンドウ オブジェクトです。)

私は webpack を使用しているため、このセクションは webpack ユーザー向けです。

imports-loader は次のとおりです。

{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'
}

vendors.js ファイルは以下をインポートする必要があります。

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

owl.carousel 2 はまだjQuery の非推奨関数andSelf () を使用しているため、新しいバージョンのaddBack () に置き換える必要があることに注意してください。

owl パッケージ dist/owl.carousel.js の node_modules フォルダーに移動します: andSelf () のすべての出現箇所を --> addBack () に置き換えます。

これでAngular 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 最終リリースと owl.carousel 2.1.4 リリースの間の統合を完了するには、すべての手順が必要であるため、上記に従ってください。

于 2016-09-25T19:15:15.890 に答える