Come usare jQuery con Angular?

Qualcuno può dirmi, come usare jQuery con Angular ?

class MyComponent { constructor() { // how to query the DOM element from here? } } 

Sono consapevole che ci sono soluzioni alternative come manipolare la class o l’ id dell’elemento DOM in anticipo, ma spero in un modo più pulito di farlo.

L’utilizzo di jQuery da Angular2 è un gioco da ragazzi rispetto a ng1. Se stai usando TypeScript, puoi prima fare riferimento alla definizione del typescript jQuery.

 tsd install jquery --save or typings install dt~jquery --global --save 

TypescriptDefinitions non sono richiesti poiché potresti usare any tipo come $ o jQuery

Nel componente angular dovresti fare riferimento a un elemento DOM dal modello usando @ViewChild() Dopo aver inizializzato la vista, puoi usare la proprietà nativeElement di questo object e passare a jQuery.

Dichiarando $ (o jQuery ) come JQueryStatic fornirai un riferimento digitato a jQuery.

 import {bootstrap} from '@angular/platform-browser-dynamic'; import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core'; declare var $:JQueryStatic; @Component({ selector: 'ng-chosen', template: ` 

{{selectedValue}}

` }) export class NgChosenComponent implements AfterViewInit { @ViewChild('selectElem') el:ElementRef; items = ['First', 'Second', 'Third']; selectedValue = 'Second'; ngAfterViewInit() { $(this.el.nativeElement) .chosen() .on('change', (e, args) => { this.selectedValue = args.selected; }); } } bootstrap(NgChosenComponent);

Questo esempio è disponibile su plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint si lamenterà di aver chosen non essere una proprietà su $, per risolvere questo problema è ansible aggiungere una definizione all’interfaccia JQuery nel proprio file * .d.ts personalizzato

 interface JQuery { chosen(options?:any):JQuery; } 

Perché tutti lo fanno diventare una scienza missilistica? Per chiunque abbia bisogno di fare alcune cose di base su elementi statici, ad esempio, body tag, basta fare questo:

  1. In index.html aggiungi tag script con il percorso alla tua jquery lib, non importa dove (in questo modo puoi usare anche i tag condizionali IE per caricare la versione inferiore di jquery per IE9 e meno).
  2. Nel blocco del export component hai una funzione che chiama il tuo codice: $("body").addClass("done"); Normalmente questo causa un errore di dichiarazione, quindi subito dopo tutte le importazioni in questo file .ts, aggiungi declare var $:any; e tu sei bello andare!

Questo è ciò che ha funzionato per me.

PASSO 1 – Per prima cosa

 // In the console // First install jQuery npm install --save jquery // and jQuery Definition npm install -D @types/jquery 

PASSAGGIO 2 – IMPORT

 // Now, within any of the app files (ES2015 style) import * as $ from 'jquery'; // $('#elemId').width(); // OR // CommonJS style - working with "require" import $ = require('jquery') // $('#elemId').width(); 

#UPDATE – Feb - 2017

Ultimamente, sto scrivendo codice con ES6 invece di typescript e sono in grado di import senza * as $ import statement . Questo è quello che sembra ora:

 import $ from 'jquery'; // $('#elemId').width(); 

In bocca al lupo.

Ora è diventato molto semplice, puoi farlo semplicemente dichiarando la variabile jQuery con qualsiasi tipo all’interno del controller Angular2.

 declare var jQuery:any; 

Aggiungi questo subito dopo le dichiarazioni di importazione e prima del decoratore di componenti.

Per accedere a qualsiasi elemento con ID X o Classe X devi solo farlo

 jQuery("#X or .X").someFunc(); 

Si prega di seguire questi semplici passaggi. Ha funzionato per me. Iniziamo con una nuova app angular 2 per evitare qualsiasi confusione. Sto usando Angular cli. Quindi, installalo se non lo hai già. https://cli.angular.io/

Passaggio 1: crea un’app demo 2 angular

 ng new jquery-demo 

puoi usare qualsiasi nome Ora controlla se funziona funzionando sotto cmd. (Ora, assicurati di indicare “jquery-demo” se non usi il comando cd)

 ng serve 

vedrai “app funziona!” sul browser.

Passo 2: Installa Bower (un gestore di pacchetti per il web)

Esegui questo comando su cli (assicurati di indicare “jquery-demo” se non usi il comando cd):

 npm i -g bower --save 

Ora, dopo aver completato con successo l’installazione di bower, creare un file “bower.json” utilizzando il seguente comando:

 bower init 

Richiederà degli input, ti basterà premere invio per tutti se desideri valori predefiniti e alla fine digiterà “Sì” quando verrà chiesto “Sembra buono?”

Ora puoi vedere un nuovo file (bower.json) nella cartella “jquery-demo”. Puoi trovare maggiori informazioni su https://bower.io/

Passaggio 3: installa jquery

Esegui questo comando

 bower install jquery --save 

Creerà una nuova cartella (bower_components) che conterrà la cartella di installazione di jQuery. Ora hai jquery installato nella cartella ‘bower_components’.

Passaggio 4: aggiungere il percorso jquery nel file ‘angular-cli.json’

Aprire il file ‘angular-cli.json’ (presente nella cartella ‘jquery-demo’) e aggiungere la posizione jquery negli “script”. Sembrerà così:

 "scripts": ["../bower_components/jquery/dist/jquery.min.js" ] 

Passaggio 5: scrivere un codice jquery semplice per il test

Apri il file “app.component.html” e aggiungi una semplice riga di codice, il file sarà simile al seguente:

 

{{title}}

If you click on me, I will disappear.

Ora apri il file ‘app.component.ts’ e aggiungi la dichiarazione e il codice della variabile jquery per il tag ‘p’. Dovresti usare anche lifecycle hook ngAfterViewInit (). Dopo aver apportato delle modifiche, il file sarà simile a questo:

 import { Component, AfterViewInit } from '@angular/core'; declare var $:any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; ngAfterViewInit(){ $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); } } 

Ora esegui la tua app angular 2 usando il comando ‘ng serve’ e testalo. Dovrebbe funzionare.

Un modo semplice:

1. includere lo script

index.html

  

2. dichiarare

my.component.ts

 declare var $: any; 

3. usare

 @Component({ selector: 'home', templateUrl: './my.component.html', }) export class MyComponent implements OnInit { ... $("#myselector").style="display: none;"; } 

È ansible implementare il ciclo di vita hook ngAfterViewInit () per aggiungere alcune manipolazioni DOM

 ngAfterViewInit() { var el:any = elelemtRef.domElement.children[0]; $(el).chosen().on('change', (e, args) => { _this.selectedValue = args.selected; }); } 

Fai attenzione quando usi router perché angular2 può riciclare viste. Quindi devi essere sicuro che le manipolazioni degli elementi DOM siano fatte solo nella prima chiamata di afterViewInit .. (Puoi usare le variabili booleache statiche per farlo)

 class Component { let static chosenInitialized : boolean = false; ngAfterViewInit() { if (!Component.chosenInitialized) { var el:any = elelemtRef.domElement.children[0]; $(el).chosen().on('change', (e, args) => { _this.selectedValue = args.selected; }); Component.chosenInitialized = true; } } } 

Lo faccio in modo più semplice – prima installa jquery da npm in console: npm install jquery -S e poi nel file component scrivo: let $ = require('.../jquery.min.js') e funziona! Ecco un esempio completo di alcuni miei codici:

 import { Component, Input, ElementRef, OnInit } from '@angular/core'; let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); @Component({ selector: 'departments-connections-graph', templateUrl: './departmentsConnectionsGraph.template.html', }) export class DepartmentsConnectionsGraph implements OnInit { rootNode : any; container: any; constructor(rootNode: ElementRef) { this.rootNode = rootNode; } ngOnInit() { this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0]; console.log({ container : this.container}); ... } } 

In teplate ho per esempio:

 
something...

MODIFICARE

In alternativa invece di usare:

 let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); 

uso

 declare var $: any; 

e nel tuo index.html inserisci:

  

Questo inizializzerà jquery solo una volta globaly – questo è importante ad esempio per usare le windows modali nel bootstrap …

// installazione di jquery npm install jquery --save

// installazione del tipo defintion per le typings install dt~jquery --global --save jquery typings install dt~jquery --global --save

// aggiunta della libreria jquery nel file di configurazione build come specificato (nel file “angular-cli-build.js”)

 vendorNpmFiles: [ ......... ......... 'jquery/dist/jquery.min.js' ] 

// esegue la build per aggiungere la libreria jquery nel build ng build

// aggiungendo la relativa configurazione del percorso (in system-config.js) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' }; /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

 /** User packages configuration. */ const packages: any = { ......, 'jquery':{ main: 'jquery.min', format: 'global', defaultExtension: 'js'}}; 

// importa la libreria jquery nel tuo file componente

 import 'jquery'; 

di seguito è riportato il codice snipppet del mio componente di esempio

 import { Component } from '@angular/core'; import 'jquery'; @Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { list:Array = [90,98,56,90]; title = 'app works!'; isNumber:boolean = jQuery.isNumeric(89) constructor(){} } 

passo 1: usa il comando: npm installa jquery –save

passo 2: puoi semplicemente importare angular come:

importare $ da ‘jquery’;

È tutto .

Un esempio potrebbe essere:

 import { Component } from '@angular/core'; import $ from 'jquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; constructor(){ console.log($('body')); } } 

Utilizzare Jquery in Angular2 (4)

Segui questi punti

installa la definizione del tipo Jquery e Juqry

Per l’installazione di Jquery, npm install jquery --save

Per la definizione del tipo di Jquery Installazione npm install @types/jquery --save-dev

e quindi semplicemente importa il jquery

 import { Component } from '@angular/core'; import * as $ from 'jquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { console.log($(window)); // jquery is accessible } 

Se usi angular-cli puoi fare:

  1. Installa la dipendenza :

    npm installa jquery –save

    npm install @ types / jquery –save-dev

  2. Importa il file :

    Aggiungi “../node_modules/jquery/dist/jquery.min.js” alla sezione “script” nel file .angular-cli.json

  3. Dichiara jquery :

    Aggiungi “$” alla sezione “tipi” di tsconfig.app.json

Puoi trovare maggiori dettagli sul documento ang angular ufficiale

Dato che sono un idiota, ho pensato che sarebbe stato utile avere un codice funzionante.

Inoltre, la versione di dattilografia angular2 del protractor angular presenta problemi con jQuery $ , quindi la risposta accettata in alto non mi fornisce una compilazione pulita.

Ecco i passaggi che devo svolgere:

index.html

  ...  ...  

Dentro my.component.ts

 import { Component, EventEmitter, Input, OnInit, Output, NgZone, AfterContentChecked, ElementRef, ViewChild } from "@angular/core"; import {Router} from "@angular/router"; declare var jQuery:any; @Component({ moduleId: module.id, selector: 'mycomponent', templateUrl: 'my.component.html', styleUrls: ['../../scss/my.component.css'], }) export class MyComponent implements OnInit, AfterContentChecked{ ... scrollLeft() { jQuery('#myElement').animate({scrollLeft: 100}, 500); } } 

1) Per accedere al DOM nel componente.

 import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter'; constructor(el: ElementRef,public zone:NgZone) { this.el = el.nativeElement; this.dom = new BrowserDomAdapter(); } ngOnInit() { this.dom.setValue(this.el,"Adding some content from ngOnInit"); } 

Puoi includere jQuery nel seguente modo. 2) Includere il file jquery in index.html prima che carichi angular2

   Angular 2 QuickStart              

Puoi usare Jquery nel modo seguente, Qui sto usando il selettore di date di JQuery Ui.

  import { Directive, ElementRef} from '@angular/core'; declare var $:any; @Directive({ selector: '[uiDatePicker]', }) export class UiDatePickerDirective { private el: HTMLElement; constructor(el: ElementRef) { this.el = el.nativeElement; } ngOnInit() { $(this.el).datepicker({ onSelect: function(dateText:string) { //do something on select } }); } } 

Questo lavoro per me.

Scrivi e basta

dichiarare var $: any; dopo tutta la sezione di importazione puoi usare jquery e includere la libreria jquery nella pagina index.html

per me funziona

Sto saltando l’installazione di jquery poiché questo punto è stato menzionato in tutti i post creati prima del mio. Quindi, hai già installato jquery. Importando t nel tuo componente in questo modo

 import * as $ from 'jquery'; 

funzionerà, ma c’è un altro modo “angular” per farlo creando un servizio.

Passo n. 1: crea il file jquery.service.ts .

 // in Angular v2 it is OpaqueToken (I am on Angular v5) import { InjectionToken } from '@angular/core'; export const JQUERY_TOKEN = new InjectionToken('jQuery'); 

Passo. no. 2: registra il servizio in app.module.ts

 import { JQUERY_TOKEN } from './services/jQuery.service'; declare const jQuery: Object; providers: [ { provide: JQUERY_TOKEN, useValue: jQuery }, ] 

Passo n. 3: iniettare il servizio nel componente my-super-duper.component.ts

 import { Component, Inject } from '@angular/core'; export class MySuperDuperComponent { constructor(@Inject(JQUERY_TOKEN) private $: any) {} someEventHandler() { this.$('#my-element').css('display', 'none'); } } 

Sarò molto grato se qualcuno può spiegare pro e contro di entrambi i metodi: DI jquery come servizio vs import * come $ da ‘jquery’;

Il modo più efficace che ho trovato è usare setTimeout con il tempo di 0 all’interno del costruttore di pagine / componenti. Ciò consente di eseguire jQuery nel successivo ciclo di esecuzione dopo che Angular ha completato il caricamento di tutti i componenti figlio. Potrebbero essere utilizzati alcuni altri metodi di componenti, ma tutto ciò che ho provato funziona meglio quando viene eseguito all’interno di un setTimeout.

 export class HomePage { constructor() { setTimeout(() => { // run jQuery stuff here }, 0); } } 

Ecco cosa ha funzionato per me – Angular 2 con webpack

Ho provato a dichiarare $ as type any ma ogni volta che ho provato a usare qualsiasi modulo JQuery stavo ottenendo (per esempio) $(..).datepicker() non è una funzione

Dal momento che ho Jquery incluso nel mio file vendor.ts l’ho semplicemente importato nel mio componente usando

import * as $ from 'jquery';

Sono in grado di utilizzare i plugin Jquery (come bootstrap-datetimepicker) ora

Puoi anche provare a importarlo con “InjectionToken”. Come descritto qui: Utilizzare jQuery in Angular / Typescript senza una definizione di tipo

Puoi semplicemente iniettare l’istanza globale jQuery e usarla. Per questo non avrai bisogno di definizioni o tipi di tipizzazione.

 import { InjectionToken } from '@angular/core'; export const JQ_TOKEN = new InjectionToken('jQuery'); export function jQueryFactory() { return window['jQuery']; } export const JQUERY_PROVIDER = [ { provide: JQ_TOKEN, useFactory: jQueryFactory }, ]; 

Se impostato correttamente nel tuo app.module.ts:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { JQ_TOKEN } from './jQuery.service'; declare let jQuery: Object; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], providers: [ { provide: JQ_TOKEN, useValue: jQuery } ], bootstrap: [AppComponent] }) export class AppModule { } 

Puoi iniziare a usarlo nei tuoi componenti:

 import { Component, Inject } from '@angular/core'; import { JQ_TOKEN } from './jQuery.service'; @Component({ selector: "selector", templateUrl: 'somefile.html' }) export class SomeComponent { constructor( @Inject(JQ_TOKEN) private $: any) { } somefunction() { this.$('...').doSomething(); } }