Question

我想在我的角应用程序中使用jquery-ui的切换功能。我安装了 jquery-ui与npm：

npm install jquery jquery-ui

正如本answer所述，我添加了angular-cli.json文件的路径。但是我得到了这个错误：

Error: ENOENT: no such file or directory, open 'C:\Users\Frank95\Angular projects\Portfolio-Slider\node_modules\jquery-ui\jquery-ui.js'

我在jquery-ui文件夹中搜索，没有jquery-ui.js文件。我应该把这条路放在哪里？

Answer 1

如果您通过Angular CLI导入，则没有一个文件可以包含这样的文件。您需要单独添加文件，如下所示：

这是我的Angular CLI文件，我只使用其中的几个。

  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/metismenu/dist/metisMenu.min.js",
    "../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
    "../node_modules/jquery-ui/ui/widget.js",
    "../node_modules/jquery-ui/ui/widgets/datepicker.js",
    "../node_modules/jquery-ui-timepicker-addon/dist/jquery-ui-timepicker-addon.js"
  ],

BTW，.toggle是jquery的函数，jquery-ui只是使用它。

或者，您只需链接src目录中index.html文件头部的CDN资源即可。虽然不推荐这种方法适用于Angular。

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

如果您想选择保留哪些模块，可以访问http://jqueryui.com/download/并逐一选择。

Answer 2

install jquery - npm install jquery
install jquery ui - npm install jquery-ui-dist --save

将此文件放入脚本中的angular.json

"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-ui-dist/jquery-ui.js"

并将此文件以样式

放在angular.json中

"./node_modules/jquery-ui-dist/jquery-ui.css"

在ts文件中像声明let $: any;一样导入，并在jquery事件完成时写入jquery ui和ngOnInit代码

Answer 3

如果您在项目中包含了jQuery文件，那么只需在组件文件中添加一行 var $ as any; 然后您就可以使用jquery函数，如hide，show，toggle DOM元素通过ViewChild。

如何在Angular 4中导入jquery-ui

3 个答案: