Question

我在棱角项目中使用ngx-slick-carousel来放置滑块。但是，当我将此组件路由到滑块所在的位置时出现错误，因此我的控制台向我显示了此错误

错误TypeError：_this。$ instance.slick不是函数在ngx-slick-carousel.js：121 在ZoneDelegate ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke （zone.js：391）在Zone ../ node_modules / zone.js / dist / zone.js.Zone.run（zone.js：150）在NgZone.push ../ node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular （core.js：3779）在SlickCarouselComponent.push ../ node_modules / ngx-slick-carousel / fesm5 / ngx-slick-carousel.js.SlickCarouselComponent.initSlick（ngx-slick-carousel.js：114）在SlickCarouselComponent.push ../ node_modules / ngx-slick-carousel / fesm5 / ngx-slick-carousel.js.SlickCarouselComponent.ngAfterViewChecked （ngx-slick-carousel.js：70）在callProviderLifecycles（core.js：9563）在callElementProvidersLifecycles（core.js：9534）在callLifecycleHooksChildrenFirst（core.js：9524）在checkAndUpdateView（core.js：10460）

HTML

<ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig2">
        <div ngxSlickItem *ngFor="let legislation of objLegislationList" class="slide">
          <div class="descBox row-2">
            <img
              src="http://1.bp.blogspot.com/-Qy1y_Ur-_mE/TtxVJ86z2EI/AAAAAAAAAss/meLIad_uSfk/s1600/law-background-1-767326.jpg" />
            <h3 onMouseOver="this.style.cursor='pointer'">{{legislation.Title}}</h3>
            <p style="margin-bottom: 0;">Date : {{legislation.Date}}</p>
            <p>Category {{legislation.CatName}}</p>
          </div>
        </div>
      </ngx-slick-carousel>

component.ts

ngAfterViewInit() {
    this.iniSlickJs();
  }
private iniSlickJs() {
    const htmlScriptElement = document.createElement('script');
    htmlScriptElement.src = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js';
    this.elementRef.nativeElement.appendChild(htmlScriptElement);
  }

Answer 1

我希望您已经使用以下命令成功安装了Slick库：

$ npm install jquery --save
$ npm install slick-carousel --save
$ npm install ngx-slick-carousel --save

在angular.json文件的“脚本”中包括 jquery 和 slick js ：

"scripts": [
    ...
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/slick-carousel/slick/slick.min.js",
    ...
  ]

然后使用ng serve 重新编译代码。希望对您有帮助。谢谢

TypeError：_this。$ instance.slick不是函数

1 个答案: