为什么 jQuery 库在 Angular 中无法识别

Question

我正在尝试将 slick-carousel 集成到我的 angular 应用程序中（不幸的是 angular 包装器非常有限，无法支持我们的 cards/slides 设计）。

应用程序支持

JQuery（即编写 $(#myId).text('text') 将更改相应的 DOM 元素）但无法弄清楚为什么不支持不认识slick.

这些是我在 npm install slick-carousel

之后执行的步骤

在 angular.json 添加了 'scripts'

...
"projects": {
  "my-app": {
    ...
    "architect": {
      "build": {
        ...
        "options": {
          ...
          "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/slick-carousel/slick/slick.min.js"
          ]
        },
        ...
      }...
    }...
  }...
}...

和我的component.ts

import * as $ from "jquery";
...
private initSlick(elementId) {
        $('#' + elementId).slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            draggable: false    
        });
    }

这导致错误

Property 'slick' does not exist on type 'JQuery'. Did you mean 'click'?

184         $('#' + elementId).slick({
  node_modules/@types/jquery/JQuery.d.ts:1868:5
    1868     click<TData>(eventData: TData,
    1869     handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, 'click'>): this;
    'click' is declared here.

我也试过：

硬编码 ID 只是为了确保 $('#myCarousel').slick({

进入html

   <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>

更新正如建议的那样，我在 JQuery 调用之前添加了 <any> 现在项目编译成功但是我收到运行时错误更新语法

import * as $ from "jquery";
    ...
    private initSlick(elementId) {
       (<any>$('#' + elementId)).slick({
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 1,
                draggable: false    
            });
        }

和运行时错误：query__WEBPACK_IMPORTED_MODULE_2__(...).slick is not a function

请帮忙：

解决问题的建议或者
link 到有关创建幻灯片效果的教程，以便自己尝试实现幻灯片

干杯。

Answer 1

您可能想尝试安装任何与 slick-carousel 相关的@types，以便 Angular 可以知道并检测与包关联的类型。

Answer 2

更简单的方法：

在 index.html 中包含 jQuery 脚本 link。如下所示

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

在您的 .ts 文件中，在 class 定义之外声明变量 $，如下所示。可以在最后一个导入语句下面

declare var $: any;

您现在可以在 angular 代码中使用 jquery 选择器而不会出现问题。

$('#myCarousel').slick({ ...

为什么 jQuery 库在 Angular 中无法识别

why a jQuery library is not recognized in Angular

javascript

jquery

angular

slick.js