jQuery 插件不适用于 Angular 5（插件不是函数）

Question

我尝试让 jQuery 插件 (stickyNavbar) 与 Angular 5 一起工作。但我总是收到错误 $(...).stickyNavbar is not a function（下图）

.angular-cli.json

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../src/assets/js/jquery.stickyNavbar.min.js"
],

组件

import * as $ from 'jquery';


ngOnInit() {

    $(function () {
      alert('Hello'); // This works
      $('.menu-card').stickyNavbar(); // stickyNavbar is not a functin
    });

    setTimeout(() => {
      this.loading = false;
    }, 1000)
  }

错误

你有什么想法吗？

Answer 1

我遇到了同样的问题。

尝试这样做：

npm install jquery

然后，在您需要的页面中导入 jquery：

import * as $ from 'jquery';

Answer 2

在许多情况下，JQuery 不能很好地与 Angular 配合使用，因此它是一种更好的方法来找到与 Angular 兼容的插件。或者简单地使用 css 实现这一点。 sticky-angular-material-header

您还可以使用包angular-material 或ngx-bootstrap，它提供了开箱即用的功能。

Answer 3

当您将脚本添加到 angular.json 文件时，捆绑器已经添加了它们。你不需要使用import。如果您这样做，您的脚本将被额外捆绑为模块。对于您的方案，您只需将 $ 变量声明为 any：

declare var $: any;

Answer 4

脚本无法识别jQuery，报错

“jQuery 未定义”或 “$(...).myCurrentPlugin 不是函数”

要使插件正常工作，您必须执行以下操作：

转到节点模块内的插件文件，按以下方式包装它：

旧版本：

jQuery.fn.myPlugin= function (y) {y ...

新版本：

export default function test(jQuery) {
    jQuery.fn.myPlugin= function (y) {y ... (all plugin code)
    }

然后在角度分量中：

import myPlugin from "node_modules/myPuglin/myPuglin.min.js"
import * as jquery from 'jquery';
let $: any = jquery;
myPlugin($)

现在可以了

Answer 5

如果有人仍在寻找解决方案。 我对另一个插件有类似的问题。没有一个解决方案对我有用。我不得不从 ts 文件中删除 import * as $ from "jquery"。

原因： 如果您已使用以下命令从 cli 安装 jquery，则无需在每个 ts 文件中导入 jquery。 Jquery 将在所有 ts 文件中可用。

npm install jquery --save,
npm install @types/jquery --save

如果在ts文件中导入jquery，则只有jquery.min.js自带的函数可用。因此，如果您引用了任何外部 jquery 插件，这些功能将不可用。您可以通过包含在 typing.d.s 中使其编译，但它会在运行时失败。

我的完整解决方案：

1. 从 cli 安装 jquery
2. 在index.html中导入外部jquery插件文件
3. 在typings.d.ts 文件中配置外部插件的输入。
4. 在任何 .ts 文件中使用 $/jquery 和插件。