Comment utiliser jQuery avec Angular?


343

Quelqu'un peut-il me dire comment utiliser jQuery avec Angular ?

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

Je suis conscient qu'il existe des solutions de contournement comme la manipulation de la classe ou de l' ID de l'élément DOM à l'avance, mais j'espère une façon plus propre de le faire.


2
Je ne sais pas quelle version vous utilisiez au moment où vous avez posté, mais pour moi, ajouter JQuery cdn dans index.html suffit pour appeler $ dans un composant
theFreedomBanana


10
Bien que certaines fonctionnalités jQuery (en particulier les plugins ou jQueryUI) puissent être très utiles dans une application Angular2, il n'est pas recommandé d'interroger et de manipuler le DOM à l'intérieur des composants Angular2, comme vous l'avez décrit dans votre question. Dans les applications Angular2, les éléments DOM que vous souhaitez manipuler doivent être liés à votre modèle de composant. L'état des éléments DOM doit changer en fonction des modifications du modèle. Découvrez cette réponse: stackoverflow.com/questions/42411744/best-practice-of-angular-2
Benyamin Shoham

6
Je pense que la bonne réponse à cela est: vous ne le faites pas. Angular est plus avancé et plus récent que jquery, ce n'est pas obsolète et a un code beaucoup plus propre
mast3rd3mon

7
Pourquoi une personne devrait-elle utiliser JQuery avec Angular?
Cristian Traìna

Réponses:


331

L'utilisation de jQuery d'Angular2 est un jeu d'enfant par rapport à ng1. Si vous utilisez TypeScript, vous pouvez d'abord référencer la définition de typeScript jQuery.

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

TypescriptDefinitions ne sont pas requis car vous pouvez simplement utiliser anycomme type pour $oujQuery

Dans votre composant angulaire, vous devez référencer un élément DOM du modèle en utilisant Une @ViewChild()fois la vue initialisée, vous pouvez utiliser la nativeElementpropriété de cet objet et passer à jQuery.

Déclarer $(ou jQuery) comme JQueryStatic vous donnera une référence typée à 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);

Cet exemple est disponible sur plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint se plaindra de chosenne pas être une propriété sur $, pour résoudre ce problème, vous pouvez ajouter une définition à l'interface JQuery dans votre fichier personnalisé * .d.ts

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

2
Je ne sais pas pourquoi la setTimeoutsolution de contournement est requise. J'ai essayé avec plusieurs autres composants jQuery, et il semble que tous nécessitent cette solution pour une initialisation correcte. J'espère que cela changera dans la prochaine version de ng2
werenskjold

7
de nouveaux rappels ont été ajoutés dans alpha37 github.com/angular/angular/blob/2.0.0-alpha.37/CHANGELOG.md core: ajouté afterContentInit, afterViewInit et afterViewChecked hooks (d49bc43), ferme # 3897
Mourad Zouabi

18
ce n'est pas si difficile à mettre en place, mais ce n'est certainement pas "un jeu d'enfant" par rapport à angular 1. dans angular 1 vous n'aviez rien à faire, et vous pouviez simplement utiliser jquery n'importe où. angulaire 1 est construit sur jquery.
user428517

8
Après avoir installé des définitions via des typages, JQueryStatic n'est toujours pas reconnu.
Gonzalo

4
Je pense que nous devons mettre à jour cela un peu car maintenant nous utilisons NPM pour les saisies
Jackie

122

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

  1. Dans index.html, ajoutez une scriptbalise avec le chemin d'accès à votre bibliothèque jquery, peu importe où (de cette façon, vous pouvez également utiliser des balises conditionnelles IE pour charger une version inférieure de jquery pour IE9 et moins).
  2. Dans votre export componentbloc ont une fonction qui appelle votre code: $("body").addClass("done");Normalement, cela provoque une erreur de déclaration, donc juste après toutes les importations dans ce fichier .ts, ajoutez declare var $:any;et vous êtes prêt à partir!

20
Ça ne marche pas pour moi. Je vais donc étudier la science des fusées. :)
Prajeet Shrestha

11
Le point angulaire 2 est de supprimer la complexité de traiter avec le DOM. Angular 2 a un algorithme de diff qui rendra efficacement vos composants pour vous, c'est pourquoi il vaut mieux tromper jquery que sa manipulation du DOM en le pointant vers le composant angular 2, au lieu de manipuler directement le DOM.
ken

4
intellisense, mon ami, c'est pourquoi
Ayyash

5
declare var $:any;pour la victoire!
tylerlindell

2
Cela fonctionne certainement, mais si vous ne vivez plus à l'âge de pierre, optez plutôt pour la réponse acceptée.
jlh

112

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

// 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 ES6au lieu de typescriptet je peux m'en importpasser * as $dans le import statement. Voici à quoi cela ressemble maintenant:

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

Bonne chance.


50
Cela m'a pris une heure pour comprendre comment mettre jQuery dans Angular 2 (correctement) ... Je suis sûr que le développement Web va en arrière.
Starboy

1
Pour importer $ depuis le travail 'jquery', vous devez définir --allowJs
titusfx le

1
import * as $ from 'jquery';dans app.module.ts pour le rendre disponible pour l'ensemble du projet. Et btw: "Pourquoi --save au lieu de --save-dev?"
Martin Schneider

3
import $ from 'jquery';C'est la plus jolie déclaration d'importation jquery sur cette page imo. Exactement ce à quoi je voudrais qu'il ressemble.
cs_pupil

1
@Starboy, c'est parce que vous ne devriez pas avoir besoin de JQuery dans une application angulaire et si vous le faites, vous faites probablement quelque chose de mal.
phil294

55

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-le 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 suffit de faire

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

Vérifié, cela fonctionne pour angular 2 avec webpack (un modèle SPA généré par yeoman Aspnetcore SPA). Souvent, l'approche la plus simple fonctionne le mieux! Merci.
binjiezhao

1
Je l'utilise sur mon projet mais le manque de cette méthode est que nous perdons toutes les capacités de type fort des types jQuery :)
trungk18

Travailler dans Angular 6 (6.0.3)
Alejandro Morán

Travaille dans: Angular CLI: 7.1.4 Node: 10.15.0
Lance

28

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

my.component.ts

declare var $: any;

3. utiliser

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

A travaillé pour moi. Mais au lieu d'implémente OnInit (qu'Angular ne voulait pas accepter), j'ai utilisé à l'intérieur de MyComponent ngOnInit () {// mon jQuery ici}
Ilya Kushlianski

25

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

Étape 1: créer une application de démonstration angular 2

ng new jquery-demo

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

ng serve

vous verrez "l'application fonctionne!" sur le navigateur.

Étape 2: installer Bower (un gestionnaire de packages pour le Web)

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

npm i -g bower --save

Maintenant, après une installation réussie de bower, créez un fichier 'bower.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 "Ça a l'air bien?"

Vous pouvez maintenant voir un nouveau fichier (bower.json) dans le dossier "jquery-demo". Vous pouvez trouver plus d'informations sur https://bower.io/

Étape 3: installer jquery

Exécutez cette commande

bower install jquery --save

Il créera un nouveau dossier (bower_components) qui contiendra le dossier d'installation de jquery. Vous avez maintenant installé jquery dans le dossier 'bower_components'.

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

Ouvrez le fichier 'angular-cli.json' (présent dans le dossier 'jquery-demo') et ajoutez l'emplacement jquery dans les "scripts". Il ressemblera à ceci:

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

Étape 5: Écrire un code jquery simple pour les tests

Ouvrez le fichier 'app.component.html' et ajoutez une simple ligne de code, le fichier ressemblera à ceci:

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

Maintenant, ouvrez le fichier «app.component.ts» et ajoutez la déclaration de variable jquery et le code pour la balise «p». Vous devez également utiliser le hook de cycle de vie ngAfterViewInit (). Après avoir apporté des modifications, 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();
             });
           });
     }
}

Maintenant, lancez votre application angular 2 en utilisant la commande 'ng serve' et testez-la. Ça devrait marcher.


3
A MON HUMBLE AVIS. C'est la meilleure approche que j'utilise toujours bower pour les dépendances côté client.
Fırat KÜÇÜK

" $("p").click(function(){ $(this).hide(); });" meilleur exemple de quand n'utilisez pas jQuery dans Angular?!
Martin Schneider

3
N'est-il pas plus facile de configurer simplement en utilisant npm? npm install jquery --save, Puis "scripts":["../node_modules/jquery/dist/jquery.js"], puis import $ from 'jquery';dans les fichiers * .ts. Quel est l'avantage d'utiliser bower?
cs_pupil

1
@cs_pupil Vous pouvez également utiliser npm mais Bower est conçu pour gérer uniquement les packages frontaux. Ayez une recherche stackoverflow.com/questions/18641899/…
AmanDeepSharma

1
@AmanDeepSharma, merci! Curieusement, il semble que la tonnelle ait été dépréciée. npm install bowercédé: npm WARN deprecated bower@1.8.0:( stackoverflow.com/a/31219726/3806701 )
cs_pupil

13

Vous pouvez implémenter le hook de cycle de vie ngAfterViewInit () pour ajouter des 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 lors du 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;
        }
    }
}

3
Property 'domElement' does not exist on type ElementRef
villasv

12

Je le fais de manière plus simple - installez d'abord jquery par npm dans la console: npm install jquery -Spuis dans le fichier composant 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});
      ...
    }
}

En teplate j'ai par exemple:

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

ÉDITER

Alternativement au lieu d'utiliser:

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

utilisation

declare var $: any;

et dans votre index.html mettez:

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

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


je ne sais pas que je n'utilise jamais angular-cli mais j'utilise angular2-webpack-starter et ça marche là-bas.
Kamil Kiełczewski

d'où vient cette méthode require?
omeralper


1
Vous avez une faute de frappe => console.log({ conatiner : this.container});fixer àconsole.log({ container: this.container});
eric.dummy

11

étape 1: utilisez la commande: npm install jquery --save

étape 2: vous pouvez simplement importer angulaire comme:

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


}

Le module ..node_modules / @ types / jquery / index "'n'a pas d'export par défaut
Dmitry Grinko

10

// 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 le fichier "angular-cli-build.js")

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

// exécute la build pour ajouter la bibliothèque jquery dans la build 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'}};

// importer la bibliothèque jquery dans votre fichier de composant

import 'jquery';

ci-dessous est l'extrait de code de mon exemple de 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(){}
}

Génial, cela fonctionne parfaitement pour les projets ng-cli .. Merci!
Chanakya Vadla

Super lisse! J'utilise Angular-cli pour mon projet et c'est de l'or! Rock on
Logan H

Je n'ai pas de fichier 'angular-cli-build.js': /
Gonzalo

10

Si vous utilisez angular-cli, vous pouvez faire:

  1. Installez la dépendance :

    npm install jquery --save

    npm install @ types / jquery --save-dev

  2. Importez le fichier :

    Ajoutez "../node_modules/jquery/dist/jquery.min.js" à la section "script" du fichier .angular-cli.json

  3. Déclarez jquery :

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

Vous pouvez trouver plus de détails sur le doc angulaire officiel


1
Cela provoque l'erreur suivante lors de la génération: ERREUR dans l'erreur TS2688: Impossible de trouver le fichier de définition de type pour «$».
représentation

erreur TS1192: le module '' jquery '' n'a pas d'exportation par défaut
Dmitry Grinko

8

Pour utiliser Jquery dans Angular2 (4)

Suivez ces étapes

installer la définition de type Jquery et Juqry

Pour l'installation de Jquery npm install jquery --save

Pour l'installation de définition 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 
}


7

Utiliser Angular Cli

 npm install jquery --save

Dans angular.json sous le tableau des scripts

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

Maintenant, pour utiliser jQuery, tout ce que vous avez à faire est de l'importer comme suit dans le composant que vous souhaitez utiliser jQuery.

Par exemple, importer et utiliser jQuery dans le composant racine

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

chemin est une mauvaise utilisation./node_modules au lieu de ../node_modules
Vikas Kandari

4

Depuis que je suis un cancre, je pensais que ce serait bien d'avoir du code de travail.

En outre, la version de typage angulaire de angular-rapporteur a des problèmes avec jQuery$ , donc la réponse acceptée en haut ne me donne pas une compilation claire.

Voici les étapes que je dois 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 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);

    }
}

4

Ecrivez

declare var $:any;

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

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

ça a marché pour moi


2


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 index.html avant les charges 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>

Vous pouvez utiliser Jquery de la manière suivante, ici j'utilise le sélecteur de date 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
         }
        });
    }
}

Ce travail pour moi.


2

Je saute l'installation de jquery car ce point a été mentionné dans tous les messages créés avant le mien. Vous avez donc déjà installé jquery. Importation de t dans votre composant comme ceci

import * as $ from 'jquery';

fonctionnera, mais il existe une autre manière «angulaire» de le faire en créant un service.

Étape no. 1: créez le fichier 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');

Étape. non. 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: injectez le service dans votre composant 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');
    }
}

Je serai très reconnaissant si quelqu'un peut expliquer les avantages et les inconvénients des deux méthodes: DI jquery en tant que service vs import * as $ from 'jquery';


1

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 d'exécuter jQuery dans le prochain cycle d'exécution après que Angular ait terminé 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);
    }
}

3
Vous devriez certainement utiliser ngOnInit()plutôt que cela
xordon

1
ngAfterViewInit ()
Niyaz

setTimeoutne fonctionne pas vraiment si vous avez de nombreux éléments *ngForpour rendre la finition.
claudchan

1

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

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

Étant donné que Jquery est inclus dans mon fichier vendor.ts, je l'ai simplement importé dans mon composant à l'aide de

import * as $ from 'jquery';

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


Notez que votre application prendra 5 fois plus de temps pour démarrer.
jake

@jake est-ce dû au temps de chargement des bibliothèques d'amorçage?
raghav710

Non, jquery prend plus de temps. bootstrap! == twitter bootstrap
jake

@jake oops! Je voulais dire jquery je suppose. Merci pour la note
raghav710

@jake voudriez-vous expliquer pourquoi une application mettra 5 fois plus de temps à démarrer en rendant jquery disponible pour toute l'application
Marvel Moe

1

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 pas besoin de définitions de type ou de saisies.

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 correctement défini dans votre 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 { }

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

1

Installation de la bibliothèque globale en tant que documentation officielle ici

  1. Installer à partir de npm:

    npm install jquery --save

  2. Ajoutez 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 souhaitez utiliser à l'intérieur d'un composant unique, utilisez l' import $ from 'jquery';intérieur de votre composant


1

D'autres déjà publiés. mais je donne un exemple simple ici afin que cela puisse aider certains nouveaux arrivants.

Étape 1: dans votre référence de fichier index.html jquery cdn

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

Étape 2: supposons que nous voulons afficher div ou masquer div en cliquant sur un bouton:

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

Étape 3: Dans le fichier de composants ci-dessous, l'importation déclare $ comme ci-dessous:

declare var $: any;

que créer une fonction comme ci-dessous:

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

Cela fonctionnera avec les dernières Angular et JQuery


0

Tout d'abord, installez jQuery en utilisant npm comme suit:

npm install jquery  save

Ensuite, accédez au fichier ./angular-cli.json à la racine de votre dossier de projet CLI Angular, recherchez la propriété scripts: [] et incluez le chemin d'accès à jQuery comme suit:

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

Maintenant, pour utiliser jQuery, tout ce que vous avez à faire est de l'importer dans le composant que vous souhaitez utiliser jQuery.

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

Jetez un œil au code ci-dessous qui utilise jQuery pour animer div au clic, en particulier dans la deuxième ligne. Nous importons tout sous forme de $ à partir de 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");
        });
    });
  }
}

-1

Installer jquery

Terminal $ npm install jquery

(Pour bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Ajoutez ensuite l' importinstruction à app.module.ts.

import 'jquery'

(Pour bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

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

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

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

-1

Lorsque vous utilisez Angular, essayez de ne pas utiliser la bibliothèque jquery. Essayez d'utiliser les fonctionnalités et les bibliothèques produites pour le cadre angulaire. Si vous souhaitez utiliser les fonctions jquery comme find () , html () , le plus proche () et etc., je suggère d'utiliser les js purs. exemple: querySelector () , innerHTML , parentElement et etc ...

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.