时间戳

首页 > 解决方案 > 类型“JQuery”上不存在属性“光滑”'

javascript - 类型“JQuery”上不存在属性“光滑”'

问题描述

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

npm i jquery

然后光滑的旋转木马

npm 我光滑的轮播

然后我对我的 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 中调用了 slick 方法

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

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

src/app/components/slider/slider.component.ts(20,22) 中的错误：错误 TS2551：“JQuery”类型上不存在属性“slick”。您指的是 “click” 吗?

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

declare var slick: any;

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

import * as slick from 'slick-carousel';

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

src/app/components/slider/slider.component.ts(3,24) 中的错误：错误 TS2306：文件 'D:/developement/DDI World Front End/DDIWorld_frontEnd/node_modules/@types/slick-carousel/index.d .ts' 不是一个模块。

我不确定还有什么可以尝试或我做错了什么。谢谢你的帮助。

这是我完整的slider.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，但我在那里遇到了一个不同的错误。

标签： javascriptjqueryangularslick.js

解决方案

以这种方式导入jQuery：

declare var $: any;

将代码更改为：

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

推荐阅读