TypeError: _this.$instance.slick 不是函数答案

【问题标题】：TypeError: _this.$instance.slick is not a functionTypeError: _this.$instance.slick 不是函数
【发布时间】：2019-07-03 14:23:29
【问题描述】：

我在我的 Angular 项目中为滑块使用 ngx-slick-carousel。但是当我将此组件路由到滑块的位置时出现错误，因此我的控制台会显示此错误

ERROR 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>

组件.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);
  }

【问题讨论】：

您是否在应用模块导入中添加了 slicks 模块？您是否也按照 libs 文档进行安装？
是的。我在我的应用程序模块中导入它的模块，并根据文档安装它
你也安装了它的依赖，jquery 和 slick？
是的。我安装了
我遇到了这个问题，因为我忘记引用模板中引用的 'slickInit(e)' 函数'

标签： angular typescript slick.js

【解决方案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重新编译代码。我希望它对你有帮助。谢谢

【讨论】：

然后告诉我你使用光滑轮播的代码。并告诉我你的 Angular 版本
在 Angular 9 中遇到同样的问题。您找到解决方案了吗？

【解决方案2】：

安装此软件包：

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

更新您的 angular.json 文件：

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

更新后确保再次运行 ng serve

【讨论】：