Question

我正在尝试将owl-carousel实现到我的Angular 2应用程序中。

我遵循了这个示例How to use owl-carousel in Angular2?，它实际上适用于我的项目是异步更改（ng-content异步更改）的唯一问题。

当我的owl-courosel的内容发生变化（启动器或者detractor）时，通过在plnkr上实现解决方案，插件不会重新加载。所以我只看到了一个项目列表，但它们没有滚动。

所以我有nps-comments.component.html调用轮播组件：

＆＃13;

<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>

＆＃13;

然后是实际的carousel.component.ts

＆＃13;

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;
  }
}

＆＃13;

这是carousel.component.html：

＆＃13;

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

＆＃13;

任何帮助都会非常感激。谢谢。

Answer 1

大家好，我正在分享使用owl owl.carousel@2.1.4和angular 2.0.0 + webpack的解决方法。

首先你需要通过npm或类似的方式安装上面的^包。然后 - ＆gt; npm install imports-loader （因为在组件中使用owl否则你将得到fn是未定义的......因为第三方模块依赖于全局变量，如$或者这是窗口对象......）。

我正在使用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 - images文件夹

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文件夹：用 - ＆gt;替换所有出现的和自（）的回加（）。

现在是角度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版本之间的集成需要完成所有步骤。

希望你能与我分享一些代码来改善ng2 / owl2的功能/特性......

BR

如何在Angular2中使用owl-carousel与异步更改ng-content

1 个答案: