Свойство 'пятно' не существует для типа 'JQuery <HTMLElement>' - PullRequest
Новая
       11

Свойство 'пятно' не существует для типа 'JQuery <HTMLElement>'

0 голосов
/ 04 сентября 2018

У меня есть проект Angular 6, с которым я хочу использовать Slick Slider с. Сначала я установил jQuery

нпм и jquery

а затем гладкая карусель

нпм и слик-карусель

Затем я внес необходимые изменения в свой файл 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: Свойство 'slick' не существует для типа 'JQuery'. Вы имели в виду «click»?

Поэтому я попытался объявить slick в качестве переменной в верхней части файла. 

declare var slick: any;

Но это не помогло. Поэтому я попытался создать импорт, как я делаю с JQuery. 

import * as slick from 'slick-carousel';

но при попытке компиляции у меня появляется только следующее сообщение об ошибке:

ОШИБКА в src / app / components / slider / slider.component.ts (3,24): ошибка TS2306: Файл 'D: / development / 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 , но я получаю другую ошибку там.

...