Question

我是角色新手并试图实现分页轮播using ngx-slick plugin。

使用此插件，当模板中的caurosal加载时，我需要确保caurosal从索引1（而不是0）开始。这个插件给了一个称为slickGoTo的函数。为了调用这个函数，我需要光滑组件的实例。但每当我试图获取光滑组件的实例时，我得到这个＆＃39;错误：无法读取属性＆＃39; slick＆＃39;未定义的＆＃39;错误。我在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);
    }
}

希望这会有所帮助。

如何使用view Child获取Slick Component Instance

1 个答案: