嘗試在角度5中使用外部Javascript庫

Question

我知道有類似的問題，但我仍然無法讓它工作..

所以我想使用slick.js，所以我下載了文件，並將它放在我的角度應用程序的資產文件夾中

我已經導入了我的庫

angular.cli.json

"styles": [
    "./assets/scripts/slick-1.8.0/slick.css",
    "./assets/scripts/slick-1.8.0/slick-theme.css"
],
"scripts": [
    //jQuery imports above
    "./assets/scripts/slick-1.8.0/slick.min.js"
]

然后在我的組件中......

import { Component, OnInit, Injector } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as Slick from '../../../../assets/scripts/slick-1.8.0/slick/slick.min.js';
@Component({
    selector: 'app-di-type2',
    templateUrl: './di-type2.component.html',
    styleUrls: ['./di-type2.component.scss']
})

export class DiType2Component extends AppComponentBase implements OnInit {

   public constructor(
    injector: Injector
   ) {
     super(injector);
   }

   ngOnInit() {
      const slideContainer = document.querySelector('.slider');
      slideContainer.slick({
         autoplay: true,
         autoplaySpeed: 3500,
      });
   }

}

從我讀到的關於將外部javascript庫導入角度應用程序的內容應該可以工作..我在vscode中得到一個錯誤，說[ts] Property 'slick' does not exist on type 'Element'.any

然后在我的控制台中得到

任何幫助，將不勝感激！

謝謝！

Answer 1

如果在index.html中導入腳本，則可以在組件中導入后將庫聲明為類型為“any”的var（假設它沒有輸入定義* .d.ts）：

declare let <yourlib>: any;

Answer 2

使用Node和NPM安裝Slick.js

https://nodejs.org/

npm install slick-carousel --save

https://www.npmjs.com/package/slick-carousel

安裝此npm后，它將作為依賴項保存在package.json文件中。

然后導入Slick：

import 'slick-carousel';

someElement.slick();