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

Question

我尝试在Angular 5中使用jQuery插件（stickyNavbar）。但是我总是收到错误$(...).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

脚本似乎无法识别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 2

我遇到了同样的问题。

尝试这样做：

npm install jquery

然后，在所需页面中将jQuery导入为：

import * as $ from 'jquery';

Answer 3

JQuery在许多情况下不能与Angular一起很好地工作，因此它是查找与Angular兼容的插件的更好方法。或简单地使用CSS来实现。 sticky-angular-material-header

您还可以使用开箱即用的软件包angular-material或ngx-bootstrap。

Answer 4

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

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

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

如果将jQuery导入ts文件，则仅jquery.min.js附带的功能可用。因此，如果您引用了任何外部jquery插件，则这些功能将不可用。您可以通过包含type.d.s使其进行编译，但是它将在运行时失败。

我的完整解决方案：

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