Comment utiliser jQuery avec Angular?

Pourquoi tout le monde en fait une science-fusée? Pour toute autre personne qui a besoin de faire des choses de base sur des éléments statiques, par exemple, body tag, faites ceci:

1. dans l'index.html add script tag avec le chemin d'accès à votre lib jquery, peu importe où (de cette façon, vous pouvez également utiliser des balises conditionnelles IE pour charger la version inférieure de jquery pour IE9 et moins).
2. votre export component bloc ont une fonction qui appelle votre code: $("body").addClass("done"); Normalement cela provoque déclaration d'erreur, donc juste après toutes les importations en ce .fichier ts, ajouter declare var $:any; et vous êtes bon pour aller!

C'est ce qui a fonctionné pour moi.

Étape 1-Tout d'abord

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

ÉTAPE 2-IMPORTER

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

# mise à jour - Feb - 2017

Dernièrement, j'écris du code avec ES6 au lieu de typescript et je suis capable de import Sans * as $ dans le import statement. Voici à quoi cela ressemble maintenant:

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

Bonne Chance.

Maintenant, c'est devenu très facile, Vous pouvez le faire en déclarant simplement la variable jQuery avec n'importe quel type à L'intérieur du contrôleur Angular2.

declare var jQuery:any;

Ajoutez ceci juste après les instructions d'importation et avant le décorateur de composants.

Pour accéder à n'importe quel élément avec l'id X ou la classe X, il vous suffit de faire

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

, Veuillez suivre ces étapes simples. Il a travaillé pour moi. Commençons par une nouvelle application angular 2 pour éviter toute confusion. J'utilise CLI angulaire. Alors, installez-le si vous ne l'avez pas déjà. https://cli.angular.io/

Étape 1: Créer une démo angulaire 2 app

ng new jquery-demo

, Vous pouvez utiliser n'importe quel nom. Maintenant, vérifiez si cela fonctionne en exécutant en dessous de cmd.(Maintenant, assurez-vous que vous pointez vers 'jQuery-demo' si vous n'utilisez pas la commande cd)

ng serve

Vous verrez " App fonctionne!" sur navigateur.

Étape 2: installez Bower (un gestionnaire de paquets pour le web)

Exécutez cette commande sur cli (assurez-vous que vous pointez vers 'jQuery-demo' si vous n'utilisez pas la commande cd):

npm i -g bower --save

Maintenant, après l'installation réussie de bower, créer un ' bower.fichier json ' en utilisant la commande ci-dessous:

bower init

Il demandera des entrées, appuyez simplement sur Entrée pour tous si vous voulez des valeurs par défaut et à la fin tapez " Oui " quand il demandera "semble bon?"

Maintenant, vous pouvez voir un nouveau fichier (bower.json) dans le dossier "jquery-démo". Vous pouvez trouver plus d'informations sur https://bower.io/

Étape 3: Installer jquery

Exécutez cette commande

bower install jquery --save

Il va créer un nouveau dossier (bower_components) qui contiendra le dossier d'installation jquery. Maintenant, vous avez installé jquery dans le dossier 'bower_components'.

Étape 4: Ajouter l'emplacement jquery dans ' angular-cli.fichier json

Ouvrir angulaire-cli.fichier json '(présent dans 'jQuery-demo' dossier) et ajouter l'emplacement jquery dans "scripts". Cela ressemblera à ceci:

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

Étape 5: écrire du code jQuery simple pour tester

Ouvrir l'application.composant.html ' fichier et ajouter une ligne de code simple, le fichier ressemblera à ceci:

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

Maintenant ouvert ' app.composant.ts 'fichier et ajouter la déclaration de variable jQuery et le code pour la balise 'p'. Vous devez également utiliser lifecycle hook ngAfterViewInit (). Après avoir modifié le fichier ressemblera à ceci:

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

Exécutez maintenant votre angular 2 app en utilisant la commande' ng serve ' et le tester. Il devrait fonctionner.

Un moyen simple:

1. inclure le script

Index.html

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

2. déclarer

Mon.composant.ts

declare var $: any;

3. utiliser

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

Vous pouvez implémenter le hook de cycle de vie ngAfterViewInit () pour ajouter quelques manipulations DOM

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

Soyez prudent lorsque vous utilisez le routeur car angular2 peut recycler les vues .. vous devez donc être sûr que les manipulations des éléments DOM ne sont effectuées que dans le premier appel de afterViewInit .. ( Vous pouvez utiliser des variables booléennes statiques pour le faire)

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

Je le fais de manière plus simple - installez d'abord jquery par npm dans la console: npm install jquery -S puis dans le fichier de composants, j'écris simplement: let $ = require('.../jquery.min.js') et ça marche! Voici un exemple complet de mon code:

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

Dans teplate j'ai par exemple:

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

Modifier

Alternativement au lieu d'utiliser:

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

Utiliser

declare var $: any;

Et dans votre index.html mettre:

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

Cela initialisera jquery une seule fois globalement - c'est important par exemple pour utiliser des fenêtres modales dans le bootstrap...

//installation de jquerynpm install jquery --save

/ / Installation de la définition de type pour jquerytypings install dt~jquery --global --save

/ / ajout de la bibliothèque jquery dans le fichier de configuration de construction comme spécifié (dans " angular-cli-build.js" fichier)

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

//démarrage de la construction d'ajouter la bibliothèque jquery dans la construction ng build

/ / ajout de la configuration du chemin relatif (dans 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'}};

/ / importez la bibliothèque jquery dans votre fichier de composants

import 'jquery';

Voici l'extrait de code de mon exemple composant

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(){}
}

Si vous utilisez angulaires-cli vous pouvez faire :

1. Installer la dépendance :

   Npm installe jquery --save

   Npm install @ types / jquery --save-dev

2. Importer le fichier :

   Ajouter "../node_modules/jquery/dist/jquery.min.js "à la section "script" dans .angulaire de la cli.fichier json

3. Déclarer jquery :

   Ajoutez " $ "à la section" types " de tsconfig.App.json

Vous pouvez trouver plus de détails sur officielle angulaire de la cli doc

Étape 1: utilisation de la commande : npm install jquery --enregistrer

Etape 2: vous pouvez simplement importer angulaires :

Importer $ à partir de 'jquery';

C'est tout .

Un exemple serait:

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


}

Pour utiliser Jquery dans Angular2 (4)

Suivez ces setps

Installez la defination de type jQuery et Juqry

Pour L'Installation De Jquery npm install jquery --save

Pour L'Installation de defination de type Jquery npm install @types/jquery --save-dev

Puis importez simplement le 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 
}

Comme je suis un cancre, j'ai pensé que ce serait bien d'avoir du code de travail.

En outre, Angular2 typings version de Angular-protractor a des problèmes avec le jQuery $, donc, la réponse la plus acceptée ne me donne pas une compilation propre.

Voici les étapes que je suis arrivé à travailler:

Index.html

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

À l'intérieur de mon.composant.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) pour accéder à DOM dans le composant.

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

Vous pouvez inclure jQuery de la manière suivante. 2) incluez votre fichier jquery dans l'index.html avant angular2 charge

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

Vous pouvez utiliser Jquery de la manière suivante, ici j'utilise jQuery Ui date picker.

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

Ce travail pour moi.

Je saute l'installation de jquery puisque ce point a été mentionné dans tous les messages créés avant le mien. Donc, vous avez déjà installé jquery. Importer t dans votre composant comme ceci

import * as $ from 'jquery';

Fonctionnera, mais il existe une autre façon "angulaire" de le faire en créant un service.

Étape no. 1: créer jquery.service.fichier ts .

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

Étape. no. 2: enregistrez le service dans app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Étape no. 3: injecter le service dans votre composant mon-super-duper.composant.ts

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

Je serai très reconnaissant si quelqu'un peut expliquer les avantages et les inconvénients des deux méthodes: DI jquery comme un service contre de l'importation * que $ à partir de 'jquery';

Il suffit d'écrire

declare var $:any;

Après toutes les sections d'importation, vous pouvez utiliser jQuery et inclure la bibliothèque jQuery dans votre index.page html

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

Ça a marché pour moi

Le moyen le plus efficace que j'ai trouvé est d'utiliser setTimeout avec un temps de 0 à l'intérieur du constructeur de page/composant. Cela permet à jQuery de s'exécuter dans le prochain cycle d'exécution après Qu'Angular ait fini de charger tous les composants enfants. Quelques autres méthodes de composants pourraient être utilisées, mais tout ce que j'ai essayé fonctionne mieux lorsqu'il est exécuté dans un setTimeout.

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

Voici ce qui a fonctionné pour moi - Angulaire 2 avec webpack

J'ai essayé de déclarer $ comme type any mais chaque fois que j'ai essayé d'utiliser un module JQuery que je recevais (par exemple) $(..).datepicker() n'est pas une fonction

Depuis que Jquery est inclus dans mon fournisseur.fichier ts Je l'ai simplement importé dans mon composant en utilisant

import * as $ from 'jquery';

Je suis capable d'utiliser des plugins Jquery (comme bootstrap-datetimepicker) maintenant

, Vous pouvez également essayer de l'importer avec le "InjectionToken". Comme décrit ici: utilisez jQuery dans Angular / Typescript sans définition de type

Vous pouvez simplement injecter l'instance globale jQuery et l'utiliser. Pour cela, vous n'aurez besoin d'aucune définition de type ou typage.

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 },
];

Lorsqu'il est défini correctement dans votre application.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 { }

, Vous pouvez commencer à l'utiliser dans vos composants:

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

Installer jquery

Terminal$ npm install jquery

(pour bootstrap 4...)

Terminal$ npm install popper.js

Terminal$ npm install bootstrap

Puis ajoutez l'instruction import à app.module.ts.

import 'jquery'

(pour bootstrap 4...)

import 'popper.js'
import 'bootstrap'

Maintenant, vous n'aurez plus besoin de balises <SCRIPT> pour référencer le JavaScript.

(CSS que vous souhaitez utiliser encore être référencé dans styles.css)

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

Installation de la bibliothèque globale comme documentation officielle ici

1. Installer à partir de mnp:

   npm install jquery --save

2. Ajouter les fichiers de script nécessaires aux scripts:

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

Redémarrez le serveur si vous l'exécutez, et il devrait fonctionner sur votre application.

Si vous voulez utiliser à l'intérieur d'un composant simple d'utilisation import $ from 'jquery'; à l'intérieur de votre composant