Question

我有一个要与Slick Slider一起使用的Angular 6项目。首先，我安装了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）中的
ERROR：错误 TS2551：类型“ JQuery”上不存在属性“ slick”。您是说“点击”吗？

因此，我尝试将slick声明为文件顶部的变量。

declare var slick: any;

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

import * as slick from 'slick-carousel';

但这仅在尝试编译时给出以下错误消息：

src / app / components / slider / slider.component.ts（3,24）中的
ERROR：错误 TS2306：文件'D：/ development / DDI世界前沿结束/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，但我在这里遇到了另一个错误。

Answer 1

以这种方式导入jQuery：

declare var $: any;

将代码更改为此：

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

Answer 2

是的，@ jesser是正确的。

使用了这样的内容：

<html>                                                                                                                                                           
<head>
<title>ADVENTURE-SHELL</title>
</head>
<body>
    <div id='game_log'>{{game_log_div}}</div>
    <div id='room_buttons'>
         <form method="POST" action="/">
             <input type="submit" name="action" value="look">
             <input type="submit" name="action" value="go">
        </form>
    </div>
</body>
</html>

..

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

p.s：在安装光滑的轮播和jQuery之前：

  // then in function:
  require('../../../node_modules/slick-carousel/slick/slick.js');

  (<any>$('.slider-wrap')).slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 1000
});

类型“ JQuery <htmlelement>”上的属性“ slick”不存在

2 个答案: