Angular-cli 和 jQuery 插件

Question

我正在尝试在使用 angular-cli 创建的 angular2 应用程序中使用一些 jQuery 插件。

如文档中所述，我使用 npm 安装了我需要的库，如果可用，还安装了类型。然后，我在 angular-cli.json 中添加了样式和脚本，如果我打开 chrome 调试器，我可以看到库已正确加载。

问题是每次我尝试使用任何 jQuery 插件时，我总是在控制台中收到一个 js 错误，显示 "the method is not a function".

我使用 jQuery 和 fullcalendar 创建了一个小示例，它可以从此 GitHub 存储库中分叉出来。

注意：问题只存在于 JQuery 需要选择器到运行的插件（如 $("#myItem").fullcalendar()或 $(".foo").steps()）。如果你使用像 Sweetalert 这样的库，问题就不会出现。

我确定我遗漏了什么，但我真的想不通它是什么！

谢谢。

Answer 1

安装（如果你没有）

npm install @types/jquery --save-dev

您需要为您的插件编写手动输入。

创建结构：

/custom_typings
 /fullcalendar
  /index.d.ts

比 index.d.ts 类似：

interface JQuery {
  fullCalendar(options?: any): JQuery;
}

比 tsconfig.json

"typeRoots": [
  "../node_modules/@types",
  "../custom_typings"
]

Answer 2

除了一个小细节外，其他都正确，没有这个小细节就无法正常工作。如上一部分所述 here，您的组件中必须有

declare var $:any

然后 $ 将是全局的，并且会看到 fullCalendar() 函数，否则它对我不起作用。

Angular-cli and jQuery plugins