如何在 Owl Carousel (2) for angular 中实现 onChange 事件/回调/自定义点 2/7

Question

我需要在更改 owl 轮播 幻灯片时调用 angular 7 函数，我想为我的幻灯片设计自定义点。谁能帮帮我..

我参考了以下文档

https://www.npmjs.com/package/ngx-owl-carousel

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

<owl-carousel #owlElement [options]="sliderOptions" [carouselClasses]="['owl-theme', 'sliding']"></owl-carousel>


@ViewChild('owlElement', { static: false }) owlElement: OwlCarousel;

self = this;
sliderOptions = {
  items: 1, 
  dots: true, 
  nav: false, 
  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], 
  onChange: function () {
    console.log("change");
    self.changeCustomDots();
 }
};

ngOnInit() {}

changeCustomDots() {
  console.log("change custom dots styles here..");
}

Answer 1

函数语句创建的每个新函数，都根据函数的调用方式定义了自己的 this 值。所以使用 arrow 函数将引用当前对象

sliderOptions = {
  items: 1, 
  dots: true, 
  nav: false, 
  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], 
  onChange: () => {
    console.log("change");
    this.changeCustomDots();
 }
};

如何在 Owl Carousel (2) for angular 中实现 onChange 事件/回调/自定义点 2/7

How to implement onChange event/ callbacks / custom dots in Owl Carousel (2) for angular 2/7

html

javascript

owl-carousel-2

angular