如何在 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 并不是最好的方法，但我只需要一个网格，用户可以在其中放置可拖动的小部件。

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

原文由 Georgi Arnaudov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

1. npm 卸载 jquery jquery-ui
2. npm 缓存清理
3. npm 安装 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" ]

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

原文由 Georgi Arnaudov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

npm 安装 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"
],

原文由 Ivan Carmenates García 发布，翻译遵循 CC BY-SA 3.0 许可协议