从组件参考光滑实例(NGX-光滑传送带)(Reference slick instance from

2019-10-30 08:26发布

我有一个艰难的时间试图从我的部件内引用NGX-光滑传送带的实例。 我有一对夫妇在页面轮播的,我需要unslick和intilize他们当我在两者之间切换。 此刻,我已经能够引用从我的组件的光滑传送带的唯一方法是,如果我用改动后的方法,并从我的模板传递事件对象。

例如

在模板

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

我如何引用光滑实例喜欢在改变方法后,从任何地方在我的组件? 我尝试了一些方法,并似乎无法得到它的工作。 任何想法,将不胜感激。

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;

为了unslick下面的代码使用

this.slickModal.unslick();

再下面的代码初始化使用

this.slickModal.initSlick();

移动到下面的代码特定幻灯片使用

this.slickModal.slickGoTo(0);


文章来源: Reference slick instance from component (ngx-slick-carousel)