web-dev-qa-db-fra.com

Comment utiliser jQuery UI avec Angular 2

Parce que je veux incorporer la fonctionnalité glisser-déposer dans mon application, j'ai décidé d'importer jQuery UI dans mon projet Angular 2.

J'ai d'abord commencé par importer jQuery lui-même en procédant comme suit:

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

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

Cela fonctionne parfaitement pour initialiser des trucs. Mais quand j'essaye de faire à la fonction .draggable() j'obtiens l'erreur suivante:

jQuery(...).draggable is not a function

Comment puis-je faire fonctionner cela? J'ai lu beaucoup d'approches mais toutes utilisaient des system-js que je n'utilise pas dans la version actuelle sur Angular-cli. Je sais que l'utilisation de jQuery dans Angular 2 app n'est pas vraiment la meilleure approche, mais j'ai juste besoin d'une grille dans laquelle les utilisateurs peuvent déposer des widgets déplaçables.

Si vous avez des suggestions, ce sera parfait! Merci!

javascriptjqueryjquery-uiangular
12
Georgi Arnaudov

J'ai réussi à le faire fonctionner en procédant comme suit:

  1. npm désinstaller jquery jquery-ui
  2. npm cache clean
  3. npm installer jquery jquery-ui

  4. Dans angular-cli.json, j'ai ajouté mes chemins jquery et jquery-ui dans l'objet scripts. Voici à quoi ils ressemblent:

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

Après avoir terminé ces étapes, cela a fonctionné comme un charme. J'espère que cela aide quelqu'un qui a eu des problèmes avec ça.

9
Georgi Arnaudov

J'utilise angular2 avec jqueryUI. Vous devez importer jquery et 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' }
    },
});

///////////////////////////////

// Composant Angular2

import $ from 'jquery';
import 'jqueryui';
2
vidalsasoon

npm install jquery jquery-ui --save

npm install @ types/jquery --save-dev

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

usage:

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

vous pouvez également importer la feuille de style sur style.scss si vous utilisez sass

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

ou

dans .angular-cli.json

"styles": [
      "../node_modules/jquery-ui/themes/base/selectable.css",
      "./styles.scss"
],
1
Ivan Carmenates García

Il est possible que l'élément que vous sélectionnez ne soit pas encore disponible, donc le sélecteur ne parvient pas à trouver l'élément.

Vous devriez probablement appeler le .draggable () dans le hook de cycle de vie ngAfterViewInit (qui est comme ngOnInit) pour vous assurer que l'élément DOM est présent avant de l'attacher.

1
chrispy