Come usare l’interfaccia utente jQuery con Angular 2

Poiché desidero incorporare funzionalità di trascinamento della selezione nella mia app, ho deciso di importare l’interfaccia utente jQuery nel mio progetto Angular 2.

Per prima cosa ho iniziato importando jQuery facendo quanto segue:

import { ElementRef } from '@angular/core'; declare var jQuery:any; ngOnInit() { jQuery(this._elRef.nativeElement).find('ul.tabs').tabs(); } 

Questo funziona perfettamente per inizializzare le cose. Ma quando provo a fare alla funzione .draggable() ottengo il seguente errore:

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

Come posso fare questo lavoro? Ho letto molti approcci, ma tutti hanno usato system-js che nella versione attuale su Angular-cli non uso. So che usare jQuery nell’app Angular 2 non è proprio l’approccio migliore, ma ho solo bisogno di una griglia in cui gli utenti possano trascinare i widget trascinabili.

Se hai qualche suggerimento, sarà perfetto! Grazie!

Sono riuscito a farlo funzionare seguendo i seguenti passi:

  1. npm uninstall jquery jquery-ui
  2. cache npm pulita
  3. npm installa jquery jquery-ui
  4. In angular-cli.json ho aggiunto i miei percorsi jquery e jquery-ui nell’object degli script. Ecco cosa guardano:

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

Dopo aver completato questi passaggi, ha funzionato come un fascino. Spero che aiuti qualcuno che ha avuto problemi con esso.

Io uso angular2 con jqueryUI. Devi importare jquery e 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' } }, }); /////////////////////////////// 

// Componente Angular2

 import $ from 'jquery'; import 'jqueryui'; 

È ansible che l’elemento che stai selezionando non sia ancora disponibile, quindi il selettore non riesce a trovare l’elemento.

Probabilmente dovresti chiamare il .draggable () nell’hook del ciclo di vita ngAfterViewInit (che è come ngOnInit) per assicurarti che l’elemento DOM sia presente prima di collegarlo.

npm installa jquery jquery-ui –save

npm install @ types / jquery –save-dev

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

utilizzo:

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

potresti anche voler importare il foglio di stile su style.scss se usi sass

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

o

in .angular-cli.json

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

### IMPORTANTE ###

SBAGLIATO

 import * as $ from 'jquery'; import 'jquery-ui-dist/jquery-ui'; 

Perché il compilatore è un problema.
CORRETTA

 declare var require: any var $ = require('jquery'); require('jquery-ui-dist/jquery-ui'); 

O

 declare var require: any var $ = require('jquery'); import 'jquery-ui-dist/jquery-ui';