如何在Angular 2中使用jQuery UI
因为我想在我的应用程序中加入拖放function，所以我决定将jQuery UI导入我的Angular 2项目。
首先，我开始通过执行以下操作导入jQuery本身：
import { ElementRef } from '@angular/core'; declare var jQuery:any; ngOnInit() { jQuery(this._elRef.nativeElement).find('ul.tabs').tabs(); } 这非常适合初始化东西。 但是，当我尝试.draggable()函数时，我收到以下错误：
jQuery(...).draggable is not a function
我怎样才能做到这一点？ 我阅读了很多方法但是所有这些方法都使用了系统-js，在当前版本的Angular-cli中我没有使用它。 我知道在Angular 2应用程序中使用jQuery并不是最好的方法，但我只需要一个用户可以删除可拖动小部件的网格。
如果您有任何建议，那将是完美的！ 谢谢！
我设法通过执行以下步骤使其工作：
- npm卸载jquery jquery-ui
- npm缓存干净
- npm install jquery jquery-ui
-
在angular-cli.json中，我在scripts对象中添加了jquery和jquery-ui路径。 这是他们看起来的样子：
"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jquery-ui/jquery-ui.js" ]
完成这些步骤后，它就像一个魅力。 希望能帮助那些遇到问题的人。
我使用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组件
import $ from 'jquery'; import 'jqueryui';
您选择的元素可能尚未可用，因此选择器无法找到该元素。
您可能应该在ngAfterViewInit生命周期钩子（类似于ngOnInit）中调用.draggable（）以确保在附加之前存在DOM元素。
npm install jquery jquery-ui –save
npm install @ types / jquery –save-dev
import * as $ from 'jquery'; import 'jquery-ui/ui/widgets/selectable.js';
用法：
ngAfterViewInit(): void { ($('.selectable') as any).selectable({..}); }
如果使用sass，您可能还想在style.scss上导入样式表
@import '../node_modules/jquery-ui/themes/base/selectable.css';
要么
在.angular-cli.json
"styles": [ "../node_modules/jquery-ui/themes/base/selectable.css", "./styles.scss" ],
###重要###
错误
import * as $ from 'jquery'; import 'jquery-ui-dist/jquery-ui';
因为编译器有问题。
正确
declare var require: any var $ = require('jquery'); require('jquery-ui-dist/jquery-ui');
要么
declare var require: any var $ = require('jquery'); import 'jquery-ui-dist/jquery-ui';