Javascript 如何在 Angular 2 中使用 jQuery UI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41861464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jQuery UI with Angular 2
提问by Georgi Arnaudov
Because I want to incorporate Drag and Drop functionality in my app, I decided to import jQuery UI to my Angular 2 project.
因为我想在我的应用程序中加入拖放功能，所以我决定将 jQuery UI 导入到我的 Angular 2 项目中。
First I started by importing jQuery itself by doing the following:
首先，我通过执行以下操作导入 jQuery 本身：
import { ElementRef } from '@angular/core';
declare var jQuery:any;
ngOnInit() {
jQuery(this._elRef.nativeElement).find('ul.tabs').tabs();
}
This works perfectly for initializing stuff. But when I try do to the .draggable()function I get the following error:
这非常适合初始化东西。但是当我尝试执行该.draggable()函数时，出现以下错误：
jQuery(...).draggable is not a function
jQuery(...).draggable is not a function
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.
我怎样才能使这项工作？我阅读了很多方法，但它们都使用了 system-js，而在 Angular-cli 上的当前版本中，我不使用它。我知道在 Angular 2 应用程序中使用 jQuery 并不是最好的方法，但我只需要一个网格，用户可以在其中放置可拖动的小部件。
If you have any suggestions, that will be perfect! Thanks!
如果您有任何建议，那将是完美的！谢谢！
采纳答案by Georgi Arnaudov
I managed to make it work by doing the following steps:
我设法通过执行以下步骤使其工作：
- 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" ]
- npm 卸载 jquery jquery-ui
- npm 缓存清理
- npm 安装 jquery jquery-ui
在 angular-cli.json 中，我在脚本对象中添加了 jquery 和 jquery-ui 路径。这是它们的外观：
"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.
完成这些步骤后，它就像一个魅力。希望能帮助遇到问题的人。
回答by vidalsasoon
I use angular2 with jqueryUI. You need to import jquery and jqueryUI
我将 angular2 与 jqueryUI 一起使用。您需要导入 jquery 和 jqueryUI
//SystemJS
System.config({
defaultJSExtensions: true,
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
map: {
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
jqueryui: 'npm:jqueryui/jquery-ui.min.js',
material: 'npm:material-design-lite/dist/material.min.js'
},
packages: {
app: { main: 'main', format: 'register', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
},
});
///////////////////////////////
//Angular2 Component
//Angular2 组件
import $ from 'jquery';
import 'jqueryui';
回答by Ivan Carmenates García
npm install jquery jquery-ui --save
npm install jquery jquery-ui --save
npm install @types/jquery --save-dev
npm install @types/jquery --save-dev
import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/selectable.js';
usage:
用法：
ngAfterViewInit(): void {
($('.selectable') as any).selectable({..});
}
you may also want to import the stylesheet on style.scss if using sass
如果使用 sass，您可能还想在 style.scss 上导入样式表
@import '../node_modules/jquery-ui/themes/base/selectable.css';
or
或者
in .angular-cli.json
在 .angular-cli.json 中
"styles": [
"../node_modules/jquery-ui/themes/base/selectable.css",
"./styles.scss"
],
回答by chrispy
It's possible the element you're selecting isn't available yet, so the selector is failing to find the element.
您选择的元素可能尚不可用，因此选择器无法找到该元素。
You should probably call the .draggable() in the ngAfterViewInit lifecycle hook (which is like ngOnInit) to make sure the DOM element is present before attaching.
您可能应该在 ngAfterViewInit 生命周期挂钩（类似于 ngOnInit）中调用 .draggable() 以确保在附加之前存在 DOM 元素。
回答by Murat ?akmak
### IMPORTANT ###
WRONG
### 重要###
错误
import * as $ from 'jquery';
import 'jquery-ui-dist/jquery-ui';
Because compiler is problem.
CORRECT
因为编译器是问题。
正确的
declare var require: any
var $ = require('jquery');
require('jquery-ui-dist/jquery-ui');
OR
或者
declare var require: any
var $ = require('jquery');
import 'jquery-ui-dist/jquery-ui';
