Jak używać interfejsu jQuery z Angular 2

Question

Ponieważ chcę włączyć funkcję Przeciągnij i upuść w mojej aplikacji, postanowiłem zaimportować jQuery UI do mojego projektu Angular 2.

Najpierw zacząłem importując sam jQuery w następujący sposób:

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

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

Działa to doskonale dla inicjowania rzeczy. Ale gdy próbuję zrobić z funkcją .draggable() pojawia się następujący błąd:

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

Jak mogę dokonać tej pracy? Czytałem wiele podejść, ale wszystkie używały systemu-js, którego w obecnej wersji na Angular-cli nie używam. Wiem, że używanie aplikacji jQuery w Angular 2 nie jest najlepszą metodą, ale potrzebuję siatki, w której użytkownicy mogą upuszczać widżety przeciągalne.

Jeśli masz jakieś sugestie, to będzie idealnie! Dzięki!

Answer 1

udało mi się zrobić to praca, wykonując następujące kroki:

1. npm odinstalować jquery jquery-ui
2. npm cache czyste
3. npm instalacja jquery jquery-ui

4. W angular- cli.json Dodałem moje ścieżki jquery i jquery-ui do obiektu skryptów. Oto co patrzeć:

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

Po wykonaniu tych czynności, to działa jak czar. Mam nadzieję, że pomaga komuś, kto miał z tym problemy.

Answer 2

Możliwe, że wybrany element nie jest jeszcze dostępny, więc selektor nie znajduje elementu.

Powinieneś prawdopodobnie wywołać funkcję .draggable() w hoście cyklu życia ngAfterViewInit (która jest podobna do ngOnInit), aby upewnić się, że element DOM jest obecny przed dołączeniem.

Answer 3

Używam angular2 z jqueryUI. Trzeba importować jquery i 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 Komponent

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

Answer 4

### ### WAŻNE

WRONG

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

Ponieważ kompilator jest problem.
POPRAWNIE

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

LUB

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