如何在Angular 2中使用jQuery UI [英] How to use jQuery UI with Angular 2
问题描述
因为我想在我的应用程序中加入拖放功能，所以我决定将jQuery UI导入到我的Angular 2项目中。
Because I want to incorporate Drag and Drop functionality in my app, I decided to import jQuery UI to my Angular 2 project.
首先，我开始通过执行以下操作导入jQuery：
First I started by importing jQuery itself by doing the following:
import { ElementRef } from '@angular/core';
declare var jQuery:any;
ngOnInit() {
jQuery(this._elRef.nativeElement).find('ul.tabs').tabs();
}
这适用于初始化内容。但是当我尝试执行 .draggable（）函数时，我收到以下错误：
This works perfectly for initializing stuff. But when I try do to the .draggable() function I get the following error:
jQuery（...）。draggable不是函数
我怎样才能使这个工作？我阅读了很多方法但是所有这些方法都使用了system-js，在当前版本的Angular-cli中我没有使用它。我知道在Angular 2应用程序中使用jQuery并不是最好的方法，但我只需要一个用户可以删除可拖动小部件的网格。
How can I make this work? I read a lot of approaches but all of them used system-js which in the current version on Angular-cli I do not use. I know that using jQuery in Angular 2 app is not really the best approach, but I just need a grid in which users can Drop draggable widgets.
如果您有任何建议，那将是完美的！谢谢！
If you have any suggestions, that will be perfect! Thanks!
推荐答案
我设法通过以下步骤使其工作：
I managed to make it work by doing the following steps:
- npm卸载jquery jquery-ui
- npm cache clean
- npm install jquery jquery-ui
-
在angular-cli.json中，我在scripts对象中添加了jquery和jquery-ui路径。以下是它们的外观：
- npm uninstall jquery jquery-ui
- npm cache clean
- npm install jquery jquery-ui
In angular-cli.json I added my jquery and jquery-ui paths in the scripts object. Here is what they look:
scripts：[
../ node_modules/jquery/dist/jquery.min。 js，
../ node_modules/jquery-ui/jquery-ui.js
]
完成这些步骤后，它就像一个魅力。希望能帮助那些遇到问题的人。
After I completed these steps, it worked like a charm. Hope that helps someone who had problems with it.
这篇关于如何在Angular 2中使用jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
