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 esistono soluzioni alternative come manipolare la classe o l' id dell'elemento DOM in anticipo, ma spero in un modo più pulito di farlo.

L'uso di jQuery da Angular2 è un gioco da ragazzi rispetto a ng1. Se si utilizza TypeScript, è possibile innanzitutto fare riferimento alla definizione dattiloscritta jQuery.

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

Le definizioni di Typescript non sono necessarie poiché è possibile utilizzare solo anycome tipo per $ojQuery

Nel componente angolare è necessario fare riferimento a un elemento DOM dal modello usando @ViewChild()Dopo che la vista è stata inizializzata, è possibile utilizzarenativeElement proprietà di questo oggetto e passare a jQuery.

Dichiarare $(o jQuery) come JQueryStatic ti darà un riferimento tipizzato 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: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
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 chosennon essere una proprietà su $, per risolvere questo problema puoi aggiungere una definizione all'interfaccia JQuery nel tuo file personalizzato * .d.ts

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

Perché tutti ne fanno una scienza missilistica? Per chiunque altro abbia bisogno di fare alcune cose di base su elementi statici, ad esempio bodytag, basta fare questo:

1. In index.html aggiungi scripttag con il percorso alla tua lib jquery, non importa dove (in questo modo puoi anche usare i tag condizionali IE per caricare una versione inferiore di jquery per IE9 e meno).
2. Nel tuo export componentblocco 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 sei a posto!

Questo è ciò che ha funzionato per me.

PASSAGGIO 1 - Prima le prime cose

// 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();

#AGGIORNARE - Feb - 2017

Ultimamente, sto scrivendo codice con ES6al posto di typescripte sono in grado di import, senza * as $in import statement. Ecco come appare ora:

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

In bocca al lupo.

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

declare var jQuery:any;

Aggiungilo 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 fare

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

Un modo semplice:

1. include script

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. dichiarare

my.component.ts

declare var $: any;

3. utilizzare

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

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

Passaggio 1: crea un'app demo angolare 2

ng new jquery-demo

puoi usare qualsiasi nome. Ora controlla se funziona correndo sotto cmd (ora assicurati di puntare a 'jquery-demo' se non usi il comando cd)

ng serve

vedrai "app funziona!" sul browser.

Passaggio 2: installa Bower (un gestore di pacchetti per il Web)

Esegui questo comando su cli (assicurati di puntare a 'jquery-demo' se non usi il comando cd):

npm i -g bower --save

Ora, dopo aver installato correttamente Bower, crea un file 'bower.json' usando il comando seguente:

bower init

Richiederà input, basta premere invio per tutti se si desidera valori predefiniti e alla fine digitare "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: installare 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 la posizione jquery nel file 'angular-cli.json'

Apri il file 'angular-cli.json' (presente nella cartella 'jquery-demo') e aggiungi la posizione di jquery in "script". Sarà simile a questo:

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

Passaggio 5: scrivere un semplice codice jquery per il test

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

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Ora apri il file 'app.component.ts' e aggiungi la dichiarazione della variabile jquery e il codice per il tag 'p'. È necessario utilizzare anche hook del ciclo di vita ngAfterViewInit (). Dopo aver apportato le modifiche il file sarà simile al seguente:

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 testala. Dovrebbe funzionare.

È possibile implementare il hook del ciclo di vita 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 il router perché angular2 può riciclare le viste .. quindi devi essere sicuro che le manipolazioni degli elementi DOM vengano eseguite solo nella prima chiamata di afterViewInit .. (Per farlo puoi usare variabili booleane statiche)

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 di npm nella console: npm install jquery -Se poi nel file componente scrivo solo: let $ = require('.../jquery.min.js')e funziona! Ecco un esempio completo da alcuni del mio codice:

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});
      ...
    }
}

Nella piastra ho ad esempio:

<div class="departments-connections-graph">something...</div>

MODIFICARE

In alternativa invece di utilizzare:

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

uso

declare var $: any;

e nel tuo index.html inserisci:

<script src="assets/js/jquery-2.1.1.js"></script>

Questo inizializzerà jquery solo una volta a livello globale - questo è importante ad esempio per l'uso di finestre modali in bootstrap ...

passaggio 1: utilizzare il comando: npm install jquery --save

passaggio 2: puoi semplicemente importare angolare 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'));
  }


}

// installa jquerynpm install jquery --save

// installa la definizione del tipo per il jquerytypings 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 nella build ng build

// aggiunta della relativa configurazione del percorso (in system-config.js) /** 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 lo snipppet di codice 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<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Se usi angular-cli puoi fare:

1. Installa la dipendenza :

   npm install 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 cli doc angolare ufficiale

Utilizzare Jquery in Angular2 (4)

Segui questi set

installa la definizione del tipo Jquery e Juqry

Per l'installazione di Jquery npm install jquery --save

Per l'installazione di definizione del tipo Jquery npm install @types/jquery --save-dev

e quindi semplicemente importare 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 
}

Usando Angular Cli

 npm install jquery --save

In angular.json sotto la matrice di script

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Ora per usare jQuery, tutto ciò che devi fare è importarlo come segue in qualunque componente tu voglia usare jQuery.

Ad esempio l'importazione e l'utilizzo di jQuery nel componente radice

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Dato che sono un somaro, ho pensato che sarebbe stato bene avere del codice funzionante.

Inoltre, la versione delle tipizzazioni Angular2 del goniometro angolare presenta problemi con jQuery $ , quindi la risposta più accettata non mi dà una compilazione chiara.

Ecco i passaggi su cui devo lavorare:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

All'interno di 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);

    }
}

Scrivi e basta

declare var $:any;

dopo tutte le sezioni di importazione, è possibile utilizzare jQuery e includere la libreria jQuery nella pagina index.html

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

ha funzionato per me

1) Per accedere a 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"); 
 }

È possibile includere jQuery nel modo seguente. 2) Includi il tuo file jquery in index.html prima del caricamento di angular2

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

Puoi usare Jquery nel seguente modo, qui sto usando il selettore di date dell'interfaccia utente di JQuery.

    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.

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 esiste un altro modo "angolare" 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 i pro ei contro di entrambi i metodi: DI jquery come servizio vs. importazione * come $ da "jquery";

Il modo più efficace che ho trovato è usare setTimeout con tempo pari a 0 all'interno del costruttore della pagina / componente. Questo consente a jQuery di essere eseguito nel successivo ciclo di esecuzione dopo che Angular ha terminato il caricamento di tutti i componenti figlio. Potrebbero essere utilizzati alcuni altri metodi dei componenti, ma tutto quello che ho provato a funzionare meglio quando 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 $come tipo, anyma ogni volta che ho provato a utilizzare qualsiasi modulo JQuery ho ricevuto (ad esempio)$(..).datepicker() non è una funzione

Dato 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: Usa jQuery in Angular / Typescript senza una definizione del tipo

Puoi semplicemente iniettare l'istanza globale di jQuery e usarla. Per questo non avrai bisogno di alcuna definizione o digitazione di tipo.

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 in 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();
    }
}

Installazione della biblioteca globale come documentazione ufficiale qui

1. Installa da npm:

   npm install jquery --save

2. Aggiungi i file di script necessari agli script:

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Riavvia il server se lo stai eseguendo e dovrebbe funzionare sulla tua app.

Se si desidera utilizzare all'interno di un singolo componente, utilizzare import $ from 'jquery';all'interno del componente

Altri già pubblicati. ma faccio un semplice esempio qui in modo che possa aiutare alcuni nuovi arrivati.

Step-1: Nel tuo file index.html riferimento jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Step-2: supponiamo di voler mostrare div o nascondere div al clic di un pulsante:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Step-3: Nel file componente sotto l'importazione dichiarare $ come muggito:

declare var $: any;

di creare una funzione come qui sotto:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Funzionerà con gli ultimi Angular e JQuery

Innanzitutto, installa jQuery usando npm come segue:

npm install jquery — save

In secondo luogo, vai al file ./angular-cli.json alla radice della cartella del progetto della CLI angolare e trova gli script: [] proprietà e includi il percorso di jQuery come segue:

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

Ora, per usare jQuery, tutto ciò che devi fare è importarlo in qualunque componente tu voglia usare jQuery.

import * as $ from 'jquery';
(or)
declare var $: any;

Dai un'occhiata al codice seguente che utilizza jQuery per animare div al clic, specialmente nella seconda riga. Stiamo importando tutto come $ da jQuery.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

Installa jquery

$ Terminal npm install jquery

(Per bootstrap 4 ...)

$ Terminal npm install popper.js

$ Terminal npm install bootstrap

Quindi aggiungere la importdichiarazione a app.module.ts.

import 'jquery'

(Per bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Ora non avrai più bisogno di <SCRIPT>tag per fare riferimento a JavaScript.

(Qualsiasi CSS che si desidera utilizzare deve ancora essere referenziato in styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Quando usi Angular, cerca di non usare la libreria jquery. Prova a utilizzare le funzionalità e le librerie prodotte per la struttura angolare. Se vuoi usare le funzioni jquery come find () , html () , più vicino () ed ecc., Ti suggerisco di usare js puro. esempio: querySelector () , innerHTML , parentElement ed ecc ...