如何在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中,我在scripts对象中添加了jquery和jquery-ui路径.这是他们的样子:

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

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

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