如何在 Angular 2 中使用 jQuery UI

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

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

1. npm 卸载 jquery jquery-ui
2. npm 缓存清理
3. npm install jquery jquery-ui

4. 在 angular-cli.json 中，我在脚本对象中添加了我的 jquery 和 jquery-ui 路径。这是他们的样子：

   "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jquery-ui/jquery-ui.js" ]

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

Answer 2

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"
],

Answer 3

我将 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';

Answer 4

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

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

Answer 5

### 重要 ###

错误

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';