从组件中引用 slick 实例 (ngx-slick-carousel)

Question

我很难从我的组件中引用 ngx-slick-carousel 的实例。我在一个页面中有几个轮播，当我在两者之间切换时，我需要对它们进行梳理和融合。目前，我能够从我的组件中引用光滑轮播的唯一方法是，如果我使用 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 方法中的光滑实例？我尝试了几种方法，但似乎无法使其正常工作。任何想法将不胜感激。

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