尝试在 Angular 5 中使用外部 Javascript 库答案

【问题标题】：Trying to use external Javascript library in angular 5尝试在 Angular 5 中使用外部 Javascript 库
【发布时间】：2018-01-30 22:44:04
【问题描述】：

我知道有类似的问题，但我仍然无法让它工作..

所以我想使用slick.js，所以我下载了文件并将其放在我的 Angular 应用程序的资产文件夹中

我已经在我的库中导入了

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 库导入 Angular 应用程序的内容中，这应该可以工作。我在 vscode 中收到一个错误，上面写着 [ts] Property 'slick' does not exist on type 'Element'.any

然后在我的控制台中得到

任何帮助将不胜感激！

谢谢！

【问题讨论】：

TypeError 可能意味着找不到 Slick 的类型，因此编译器不知道 .slick 是一个函数。你有 javascript 库的.d.ts 文件吗？
Slickjs 需要 jquery 对象更改 document.querySelector('.slider');到 $('.slider')。你的堆栈中也应该有 jquery。
但是在 Angular 中非常不鼓励使用 jQuery DOM 选择，因为您应该使用 Angular 来为您处理 DOM。您可以使用 Angular 数据绑定和转换来创建图像滑块。也许你可以找到一个现有的 Angular 图片滑块组件。

标签： javascript angular typescript slick.js

【解决方案1】：

使用 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();

【讨论】：

【解决方案2】：

如果在 index.html 中导入脚本，则可以在导入组件后将库声明为“any”类型的 var（假设它没有类型定义 *.d.ts）：

declare let <yourlib>: any;

【讨论】：