Question

因为我想在我的应用程序中加入拖放功能，所以我决定将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

我该如何使这项工作？我阅读了很多方法但是所有这些方法都使用了system-js，在当前版本的Angular-cli中我没有使用它。我知道在Angular 2应用程序中使用jQuery并不是最好的方法，但我只需要一个用户可以删除可拖动小部件的网格。

如果您有任何建议，那将是完美的！谢谢！

Answer 1

我设法通过以下步骤使其工作：

npm uninstall jquery jquery-ui
npm cache clean
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" ]

完成这些步骤后，它就像一个魅力。希望能帮助那些遇到问题的人。

Answer 2

我使用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

import $ from 'jquery';
import 'jqueryui';

Answer 3

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({..});
}

您可能还想导入样式表在style.scss上如果使用sass

@import '../node_modules/jquery-ui/themes/base/selectable.css';

或

<。>在.angular-cli.json

"styles": [
      "../node_modules/jquery-ui/themes/base/selectable.css",
      "./styles.scss"
],

Answer 4

您选择的元素可能尚未可用，因此选择器无法找到该元素。

您应该在ngAfterViewInit生命周期钩子（类似于ngOnInit）中调用.draggable（）来确保在附加之前存在DOM元素。

Answer 5

###重要事项###

的 WRONG

B3

因为编译器有问题的 CORRECT

import * as $ from 'jquery'; import 'jquery-ui-dist/jquery-ui';

或

declare var require: any var $ = require('jquery'); require('jquery-ui-dist/jquery-ui');

如何在Angular 2中使用jQuery UI

5 个答案: