Как использовать jQuery UI с Angular 2

поскольку я хочу включить функцию перетаскивания в свое приложение, я решил импортировать jQuery UI в свой проект Angular 2.

сначала я начал с импорта самого jQuery, выполнив следующее:

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

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

Это отлично работает для инициализации материала. Но когда я пытаюсь сделать

10
angular javascript jquery jquery-ui

5 ответов

мне удалось заставить его работать, выполнив следующие действия:

  1. npm удалить jquery jquery-ui
  2. npm кэш чистый
  3. npm установить jquery jquery-ui

  4. в угловой-cli.json я добавил пути jquery и jQuery-ui в объект scripts. Вот как они выглядят:

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

после того, как я завершил эти действия, он работал как шарм. Надеюсь, это поможет кому-то, у кого были проблемы с он.

8

Я использую 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';
1

возможно, элемент, который вы выбираете, еще недоступен, поэтому селектор не может найти элемент.

вы, вероятно, должны позвонить .draggable () в крюке жизненного цикла ngAfterViewInit (который похож на ngOnInit), чтобы убедиться, что элемент DOM присутствует перед присоединением.

0

npm install jquery jquery-ui --сохранить

npm install @types / jquery --save-dev

import * as $ from 'jquery';
import 'jquery-ui/ui/widgets/selectable.js';

использование:

ngAfterViewInit(): void {
    ($('.selectable') as any).selectable({..});
}

вы также можете импортировать таблицу стилей по стилю.scss при использовании sass

@import '../node_modules/jquery-ui/themes/base/selectable.css';

или

in .угловой-cli.в JSON

"styles": [
      "../node_modules/jquery-ui/themes/base/selectable.css",
      "./styles.scss"
],
0

### важно ###

неправильно

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