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

Question

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

使用这个插件，当模板加载因果关系时，我需要确保因果关系从索引 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 按钮。我的组件类中需要相同的功能。

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

希望这会有所帮助。