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 gallery-one" #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('galleryOne') galleryOne;

要平滑，请使用以下代码

this.galleryOne.unslick();

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

this.galleryOne.initSlick(slideConfig);

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

this.galleryOne.slickGoTo(0);

来自组件的参考光滑实例（ngx-slick-carousel）

1 个答案: