Question

我已经在我的angular2应用程序中实现了Owl Carousel 2，直到现在都取得了很大的成功。轮播克隆项目以创建循环效果。这很棒，直到您需要对项目执行单击事件并且事件不会触发。 docs中有一个解决方法，我在this问题时发现了这个问题。我已经从那个SO问题修改了JSFiddle，以表明该解决方法的工作原理是我在我的应用程序中使用轮播。不幸的是，如果您不使用Angular 2，这只能解决问题。

变通方法脚本非常简单：

$('#carousel').on('click', '.item', function () {
     alert("click");
;})

由于Angular2的模块化特性并且它不鼓励直接dom操作，我不能把它放在我的js文件中并且它可以工作。我必须将它添加到组件中。问题是哪个组件以及如何获得旋转木马的dom元素参考。

有一个很好的答案here，它展示了如何使用带角度2的猫头鹰旋转木马。我修改了该问题的Plunker，以显示我在我的应用中如何使用轮播，并尝试使用克隆项解决此问题的方法。

基本上我有2个组件：

//our root app component
import { Component, AfterViewInit } from 'angular2/core';
import { OwlCarousel } from './owl-carousel.component';

@Component({
  selector: 'app',
  directives: [OwlCarousel],
  template: `

  <div  *ngFor="#carousel of carousels" let i = index;>
  <h3>{{carousel.title}}</h3>
     <owl-carousel [options]="{loop: true, margin: 5}" id=  {{carousel.title}}>
   <div *ngFor="#img of carousel.images">
     <img src="http://lorempixel.com/400/200/{{img.href}}"/>
     <button class='imagebutton'(click)=getImage(img.id) >Select image {{img.id}}</button>
   </div>
   </owl-carousel>
   <button (mouseenter)="over(carousel.title)" (mouseleave)="leave(carousel.title)" id="prev1" class="btn prev">Previous</button>
</div>
`
})

export class App {
 elment: any = {};  
  carousels = [
    {
title: 'caro1',
     images:[
        {id:'1', href: 'sports'},
        {id:'2', href: 'abstract'},
        {id:'3', href: 'people'},
        {id:'4', href: 'transport'},
        {id:'5', href: 'city'},
        {id:'6', href: 'technics'},
        {id:'7', href: 'nightlife'},
        {id:'8', href: 'animals'}
        ]
    }, 
   {
   title: 'caro2',
    images:[
        {id:'1', href: 'food'},
        {id:'2', href: 'cats'},
        {id:'3', href: 'business'},
        {id:'4', href: 'fashion'},
        {id:'5', href: 'nature'},
        {id:'6', href: 'transport'},
        {id:'7', href: 'abstract'},
        {id:'8', href: 'technics'}
        ]
    }
]
intr: any;
owl: any;

getImage(id){
  alert('You selected image' +id);
}

over(title) {
  console.log(title);
        this.intr = setInterval(() => {this.movePrevious(title)}, 500);
    };

 leave(){
      clearInterval(this.intr);
   };    


  movePrevious(title) {
      console.log("elment: " + title);
      this.owl =  $('#'+ title).owlCarousel();
        this.owl.trigger('prev.owl.carousel');
    };

    ngAfterViewInit() { 
        $('#caro1').on('click', '.item .imagebutton', function () {
        alert("click");
  });
    }   
}

你可以在ngAfterViewInit（）底部看到我放入变通方法代码并使用carousel元素id来引用它。我很确定这不起作用因为angular2的工作方式，所以我尝试使用angulars ElementRef模块（就像我在下面的owl-carousel组件的代码中所做的那样），但我无法让它在该组件中工作或下面的猫头鹰轮播组件。

import { Component, Input, ElementRef, HostBinding } from 'angular2/core';
import $ from 'jquery';
import 'owl-carousel';

@Component({
  selector: 'owl-carousel',
  template: `
  <ng-content></ng-content>  
  `
})
export class OwlCarousel {
  @HostBinding('class') defaultClass = 'owl-carousel';
  @Input() options: object;

  $owlElement: any ={};

  defaultOptions: any = {};

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {

    if(this.options === null){
      this.options = this.defaultOptions
    }
    this.$owlElement = $(this.el.nativeElement).owlCarousel(this.options);

    $(this.el.nativeElement).on('click', '.item .imagebutton', function () {
    alert("click");
    });
  }

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

我尝试了一些不同的变体，在两个组件之间移动变通方法代码但没有成功。我甚至试过像这样的.find（）：

$(this.el.nativeElement).find('#caro1').on('click', '.item .imagebutton', function () {
    alert("click");
    });

任何人都知道如何为angular2实施此解决方法？

来自Angular2应用程序中的Owl Carousel 2的克隆项目点击问题

0 个答案: