À mon avis: si vous le faites bien et si vous le gardez au minimum, vous devriez aller avec cela.

1. Installer jQuery Typings dans le projet: tsd install jQuery
2. Charger jQuery avec une balise de script (ou d’autres chargeurs …)
3. Enveloppez n’importe quel plugin jQuery avec Angular 2 Directive

Exemple:

 @Directive({ selector: "[sm-dropdown]" }) export class SMDropdown { constructor(el: ElementRef) { jQuery(el.nativeElement).dropdown(); } } 

Considérez ce plunker:

https://plnkr.co/edit/MMNWGh?p=preview

Ne pas:

• Ne l’utilisez pas pour la manipulation du DOM, il y a moyen angular …
• Ne l’utilisez pas pour les appels AJAX, il existe un moyen angular …
• Ne l’utilisez pas pour l’animation, ngAnimation arrive …

Une fois que vous avez installé la bibliothèque typescript de JQuery, faites-la référence de cette manière.

 /// 

Alors faites les importations nécessaires

 import {Component, AfterViewInit} from 'angular2/core'; 

Maintenant, écris la classe

 @Component({ selector: 'my-app', templateUrl: 'app/html/app.component.html' }) export class AppComponent implements AfterViewInit { ngAfterViewInit() { // Your jQuery code goes here $('#here').text("HALLO! ^_^"); } } 

Ce que je fais pour résoudre ce problème:

Pour la bibliothèque ne supporte pas @types/ et la bibliothèque doit être chargée lors du chargement du document (les bibliothèques moyennes doivent être ajoutées à la balise script du document)

1. Lancer npm install jquery --save

2. Ajoutez des fichiers js / css dans les scripts ou les styles de angular-cli.json comme

   "scripts": ["../node_modules/path to file", "./assets/path to file"]

Pour les bibliothèques sockets en charge @types/ , exécutez simplement npm install @types/jquery --save-dev

Pour utiliser la bibliothèque, ajoutez declare var jQuery: any; avant l’annotation @Directive ou @Component voulez utiliser la lib

P / S: J’utilise angular-cli avec webpack dans mon projet, peut-être différent avec systemjs

Vous devez indiquer où trouver votre définition de typeScript jQuery. Cela peut être fait dans un fichier typings.d.ts où vous mettez vos dactylographies comme ceci:

 /// 

Vous pouvez également installer des saisies via nœud et laisser votre configuration le charger automatiquement. C’est ce que font angular-cli.

Après cela, pour utiliser jQuery avec Angular2, vous devez comprendre un mécanisme fondamental. Angular2 a sa propre représentation dom et jQuery manipule ce dom. C’est pourquoi les gens disent “N’utilisez pas jQuery avec Angular2”. Ce n’est pas vrai. Angular2 propose une solution à ce problème. Il l’appelle ControlValueAccessor . Le but de cette opération est d’alerter angular lorsque votre plugin jQuery modifie le DOM et également de permettre à angular d’avertir votre plugin de la modification du DOM.

Laissez-moi vous expliquer ceci à travers un exemple de calendrier de sélecteur de date.

 import { Directive, ElementRef, OnInit, AfterViewInit, Input, forwardRef, OnDestroy } from '@angular/core'; import { Moment } from 'moment'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; const DATE_PICKER_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FnCalendarDirective), multi: true, }; @Directive({ selector: '[fn-calendar]', providers: [DATE_PICKER_VALUE_ACCESSOR], }) export class FnCalendarDirective implements OnInit, AfterViewInit, ControlValueAccessor, OnDestroy { @Input() format: ssortingng = 'DD/MM/YYYY HH:mm'; @Input() showClose: boolean = true; @Input() sideBySide: boolean = false; @Input() ngModel; private onTouched = () => { }; private onChange: (value: ssortingng) => void = () => { }; constructor(private el: ElementRef) { } ngOnInit() { } ngAfterViewInit() { $(this.el.nativeElement).datetimepicker({ locale: 'fr', sideBySide: this.sideBySide, format: this.format, showClose: this.showClose, icons: { time: 'fa fa-clock-o', date: 'fa fa-calendar', up: 'fa fa-chevron-up', down: 'fa fa-chevron-down', previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-bullseye', clear: 'fa fa-trash', close: 'fa fa-times' }, }).on('dp.change', event => { let date: Moment = ((event).date); if (date) { let value = date.format(this.format); this.onChange(value); } }); this.writeValue(this.ngModel); } writeValue(date: ssortingng) { $(this.el.nativeElement).datetimepicker().data('DateTimePicker').date(date); } registerOnChange(fn: any) { this.onChange = fn; } registerOnTouched(fn: any) { this.onTouched = fn; } ngOnDestroy() { $(this.el.nativeElement).datetimepicker().data('DateTimePicker').destroy(); } } 

Les choses importantes ici sont la méthode writeValue qui permet à Angular2 d’avertir votre plugin jquery qu’une modification est en cours de production. Et registerOnChange, qui vous permet d’avertir Angular2 que votre plugin apporte une modification au DOM.

En conclusion, la clé pour utiliser jQuery consiste à envelopper la directive interne du plugin jQuery et à implémenter un CustomValueAccesor pour gérer la communication entre votre plugin et Angular2.

Pour trouver des typages, vous pouvez utiliser DefinitlyTyped GitHub, qui est un référentiel de définitions de typages provenant de la bibliothèque js.

  [1]: http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html 

Vous ne devez lier aucun composant angular à jQuery

1. Chargez jQuery avec la .
2. Ajoutez un gestionnaire de documents prêts pour jQuery.

   $ ('document'). ready ((fonction ($) {

       fonction de retour () {

         // DOM est prêt et $ est une référence à jQuery

         // Il est temps de faire les choses en utilisant $

       };

   }) (jQuery));

Avantages :

• Le composant angular est exempt de dépendance jQuery.
• Plus facile de tester un tel composant, de le maintenir et de le réutiliser.
• Le code jQuery est isolé.

Toutefois, si vous devez utiliser jQuery dans les composants, utilisez des services ou des directives.

Si vous rencontrez des problèmes lors du chargement d'une vue partielle, utilisez le gestionnaire d'événements jQuery sur le noeud de document et le gestionnaire de chargement de fenêtre jQuery.

nous pouvons utiliser comme suit:

 var jq=require('./jquery.min.js'); ..... export class AppComponent{ ngOnInit(){ jq(); console.log($('body')) // show:[body, prevObject: r.fn.init[1]] //ok!normal operation! } }