如何在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 cache clean


3. npm install jquery jquery-ui



4. 在angular-cli.json中，我在scripts对象中添加了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:

scripts：[
../ 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！