类型 'JQuery<HTMLElement>' 上不存在属性'slick'

Question

我有一个 Angular 6 项目，我想使用它 Slick Slider。首先我安装了jQuery

npm i jquery

然后是光滑的旋转木马

npm i slick-carousel

然后，我对我的angular.json文件进行了必要的编辑

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/slick-carousel/slick/slick.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
]

然后我创建一个简单的滑块布局

<div class="mySlider">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>

在我的打字稿中，首先我从jquery导入*。

import * as $ from 'jquery';

最后，我在ngOnInit中调用光滑的方法

ngOnInit() {
$(document).ready(function() {
$('.mySlider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
}

当我尝试编译时，我收到以下错误消息：

src/app/components/slider/slider.component.ts(20,22( 中的错误：错误 TS2551：类型"JQuery"上不存在属性"光滑"。 您的意思是"点击"吗？

所以我试图在文件顶部将 slick 声明为变量。

declare var slick: any;

但这并没有帮助。所以我尝试像使用 jQuery 一样创建一个导入。

import * as slick from 'slick-carousel';

但这只会在尝试编译时给我以下错误消息：

src/app/components/slider

/slider.component.ts(3,24( 中的错误：错误 TS2306：文件 'D：/开发/DDI 世界前沿 End/DDIWorld_frontEnd/node_modules/@types/slick-carousel/index.d.ts' 不是模块。

我不确定还能尝试什么或我做错了什么。感谢您的任何帮助。

这是我的完整滑块.component.ts

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
// import * as slick from 'slick-carousel';
// declare var slick: any;

@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {

constructor() { }
ngOnInit() {
$(document).ready(function() {
$('.mySlider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
}
}

编辑

这是一个 StackBlitz，但我在那里遇到了不同的错误。

Answer 1

以这种方式导入 jQuery：

declare var $: any;

将代码更改为以下内容：

(<any>$('.mySlider')).slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});

Answer 2

是的，@jesser是对的。

使用了这样的东西：

import * as $ from 'jquery';
import * as slick from 'slick-carousel';

..

// then in function:
require('../../../node_modules/slick-carousel/slick/slick.js');
(<any>$('.slider-wrap')).slick({
dots: true,
autoplay: true,
autoplaySpeed: 1000
});

p.s：之前安装光滑的旋转木马和jQuery：

npm install jquery@>=1.8.0 --save-dev 
npm i slick-carousel