如何使用 View Child 获取 Slick 组件实例

Question

我是 angular 的新手，正在尝试实现分页轮播 using ngx-slick plugin。

使用这个插件，当在模板中加载 caurosal 时，我需要确保 caurosal 从索引 1（而不是 0）开始。这个插件为此提供了一个称为 slickGoTo 的功能。要调用此函数，我需要 slick 组件的实例。但是每当我尝试获取光滑组件的实例时，我都会收到此“错误：无法读取未定义的属性 'slick'”错误。我已经在 stackblitz url 中实现了这个场景（当你打开 stackblitz 时，jquery 没有加载，不知道为什么）。请建议如何获取该组件的实例

下面是使用它的模板示例：

<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
              <img src="{{ slide.img }}" alt="" width="100%">
        </div>
    </ngx-slick>

    <button (click)="addSlide()">Add</button>
    <button (click)="removeSlide()">Remove</button>
    <button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
    <button (click)="slickModal.unslick()">unslick</button>

您可以在其中看到 slickGoto 按钮。我的组件 class.

需要相同的功能

Answer 1

尝试这样的事情。

在你的 html 文件中。

<your-slick-component #slickComponent></your-slick-component>

在你的 ts 文件中。

@ViewChild('slickComponent')
public slickComponent: any;

public ngAfterViewInit(): void {
    if(this.slickComponent) {
      this.slickComponent.slickGoTo(1);
    }
}

希望这对您有所帮助。

如何使用 View Child 获取 Slick 组件实例

How to get Slick Component Instance using view Child

slick.js

angular