组件中的参考光滑实例(ngx-slick-carousel) [英] Reference slick instance from component (ngx-slick-carousel)

问题描述

我在尝试从组件内部引用ngx-slick-carousel实例时遇到了困难.我在页面中有几个旋转木马，当我在两者之间切换时，我需要解开并利用它们.目前，我能够从组件中引用光滑轮播的唯一方法是，如果我使用afterChange方法并从模板传递事件对象.

I am having a tough time trying to reference the instance of a ngx-slick-carousel from within my component. I have a couple of carousels in a page and I need to unslick and intilize them when I toggle between the two. The only way at the moment that I have been able to reference the slick carousel from my component is if I use the afterChange method and pass the event object from my template.

例如

在模板中

<ngx-slick-carousel 
     class="carousel gallery-one" 
     #galleryOne="slick-carousel" 
     [config]="slideConfig" 
     (afterChange)="afterChange($event)">

     <div ngxSlickItem *ngFor="let slide of slides.gallery" class="slide">
        <img src="{{slide.img}}">
     </div>
</ngx-slick-carousel>

在组件中

afterChange(e) {
  console.log(e.slick);
}

如何从组件中的任何位置引用平滑实例(如after change方法中的实例)?我尝试了几种方法，但似乎无法使其正常工作.任何想法将不胜感激.

How do I reference the slick instance like in the after change method from anywhere in my component? I tried a few ways and can't seem to get it to work. Any thoughts would be greatly appreciated.

推荐答案

模板

<ngx-slick-carousel 
     class="carousel" #slickModal="slick-modal"
     #galleryOne="slick-carousel" 
     [config]="slideConfig" 
     (afterChange)="afterChange($event)">

     <div ngxSlickItem *ngFor="let slide of slides.gallery" class="slide">
        <img src="{{slide.img}}">
     </div>
</ngx-slick-carousel>

在组件中，使用以下代码进行更改

In the component use below code to do the changes

@ViewChild('slickModal')slickModal:SlickCarouselComponent;

要平滑，请使用以下代码

To unslick use below code

this.slickModal.unslick();

重新初始化下面的代码使用

Re initialize use below code

this.slickModal.initSlick();

移至代码下方的特定幻灯片用途

Move to particular slide use below code

this.slickModal.slickGoTo(0);

这篇关于组件中的参考光滑实例(ngx-slick-carousel)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！