从组件（ngx-slick-carousel）中引用 slick 实例

Question

我很难尝试从我的组件中引用 ngx-slick-carousel 的实例。我在一个页面中有几个轮播，当我在两者之间切换时，我需要 unslick 和 intilize 它们。目前，我能够从我的组件引用光滑轮播的唯一方法是使用 afterChange 方法并从我的模板传递事件对象。

例如

在模板中

<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 方法中的 slick 实例？我尝试了几种方法，但似乎无法正常工作。任何想法将不胜感激。

Answer 1

模板

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

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

@ViewChild('slickModal') slickModal: SlickCarouselComponent;

取消滑动使用下面的代码

this.slickModal.unslick();

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

this.slickModal.initSlick();

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

this.slickModal.slickGoTo(0);

从组件（ngx-slick-carousel）中引用 slick 实例

Reference slick instance from component (ngx-slick-carousel)

typescript

slick.js

angular