Comment utiliser le plugin jQuery avec Angular 4 ?

Question

Je veux utiliser un curseur de gamme dans un projet angulaire et j'ai essayé d'utiliser un module disponible pour angular 4.

Il fonctionne bien pendant la compilation mais lorsque j'essaie de le construire pour le déploiement, l'erreur suivante se produit.

J'ai vérifié l'option permettant d'utiliser le plugin jQuery directement dans le projet angulaire et je n'obtiens que des options pour le faire dans Angular 2.

Est-il possible d'utiliser les plugins jQuery dans Angular 4 ?

Faites-moi savoir.

Merci d'avance !

Answer 1

Installer jquery avec npm

npm install jquery --save

Ajouter des typages

npm install --save-dev @types/jquery

Ajouter scripts à angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

Construire le projet et servir

ng build

J'espère que cela vous aidera ! Bon codage

Answer 2

Oui vous pouvez utiliser jquery avec Angular 4

Des pas :

1) En index.html mettre en dessous de la ligne dans le tag.

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

2) Dans le fichier composant ts ci-dessous vous devez déclarer var comme ceci

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

Et utiliser ce code pour le fichier html correspondant comme ceci :

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

Cela fonctionnera pour vous. Merci

Answer 3

Installer jQuery à l'aide de NPM Jquery NPM

npm install jquery

Installez le fichier de déclaration jQuery

npm install -D @types/jquery

Importer jQuery dans .ts

import * as $ from 'jquery';

appel dans la classe

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

Answer 4

Vous n'êtes pas obligé de déclarer une variable jQuery lorsque vous avez installé @types/jquery.

declare var jquery:any;   // not required
declare var $ :any;   // not required

Vous devriez avoir accès à jQuery partout.

Ce qui suit devrait fonctionner :

jQuery('.title').slideToggle();

Answer 5

Vous ne devez pas utiliser jQuery dans Angular. Bien que cela soit possible (voir les autres réponses à cette question), il est déconseillé de le faire. Pourquoi ?

Angular conserve une représentation propre du DOM dans sa mémoire et n'utilise pas de sélecteurs de requêtes (des fonctions telles que document.getElementById(id) ) comme jQuery. Au lieu de cela, toute la manipulation du DOM est effectuée par Renderer2 (et les directives Angular comme *ngFor et *ngIf accèdent à ce Renderer2 en arrière-plan/code du cadre). Si vous manipulez vous-même le DOM avec jQuery, vous finirez tôt ou tard...

1. Vous rencontrez des problèmes de synchronisation et des éléments qui apparaissent ou disparaissent au mauvais moment sur votre écran.
2. Avoir des problèmes de performance dans les composants plus complexes, car la représentation interne du DOM d'Angular est liée à zone.js et à son mécanisme de détection des changements. Ainsi, la mise à jour manuelle du DOM bloquera toujours le thread sur lequel votre application est exécutée.
3. Avoir d'autres erreurs déroutantes dont vous ne connaissez pas l'origine.
4. Impossibilité de tester correctement l'application (Jasmine exige que vous sachiez quand les éléments ont été rendus).
5. Impossibilité d'utiliser Angular Universal ou WebWorkers

Si vous voulez vraiment inclure jQuery (pour mettre en place un prototype que vous jetterez définitivement à 100%), je recommande de l'inclure au moins dans votre package.json avec npm install --save jquery au lieu de l'obtenir à partir du CDN de Google.

TLDR : Pour apprendre à manipuler le DOM à la manière d'Angular, veuillez d'abord suivre le tutoriel officiel sur le tour des héros : https://angular.io/tutorial/toh-pt2 Si vous devez accéder à des éléments situés plus haut dans la hiérarchie du DOM (parent ou document body ) ou pour une autre raison, des directives comme *ngIf , *ngFor des directives personnalisées, des tuyaux et d'autres utilitaires angulaires tels que [style.background] , [class.myOwnCustomClass] ne répondent pas à vos besoins, utilisez Renderer2 : https://www.concretepage.com/angular-2/angular-4-renderer2-example