如何在 Angular 2 中使用 jQuery UI

问题描述

因为我想在我的应用程序中加入拖放功能，所以我决定将 jQuery UI 导入到我的 Angular 2 项目中.

Because I want to incorporate Drag and Drop functionality in my app, I decided to import jQuery UI to my Angular 2 project.

首先，我通过执行以下操作导入 jQuery 本身:

First I started by importing jQuery itself by doing the following:

import { ElementRef } from '@angular/core';
declare var jQuery:any;

ngOnInit() {
    jQuery(this._elRef.nativeElement).find('ul.tabs').tabs();
}

这对于初始化东西非常有效.但是当我尝试对 .draggable() 函数执行操作时，我收到以下错误:

This works perfectly for initializing stuff. But when I try do to the .draggable() function I get the following error:

jQuery(...).draggable 不是函数

我怎样才能做到这一点?我阅读了很多方法，但它们都使用了 system-js，而在 Angular-cli 上的当前版本中，我不使用它.我知道在 Angular 2 应用程序中使用 jQuery 并不是最好的方法，但我只需要一个网格，用户可以在其中放置可拖动的小部件.

How can I make this work? I read a lot of approaches but all of them used system-js which in the current version on Angular-cli I do not use. I know that using jQuery in Angular 2 app is not really the best approach, but I just need a grid in which users can Drop draggable widgets.

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

If you have any suggestions, that will be perfect! Thanks!

推荐答案

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

I managed to make it work by doing the following steps:

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

4. 在 angular-cli.json 中，我在脚本对象中添加了 jquery 和 jquery-ui 路径.这是它们的外观:

1. npm uninstall jquery jquery-ui
2. npm cache clean
3. npm install jquery jquery-ui

4. In angular-cli.json I added my jquery and jquery-ui paths in the scripts object. Here is what they look:

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

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

After I completed these steps, it worked like a charm. Hope that helps someone who had problems with it.

这篇关于如何在 Angular 2 中使用 jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！