web-dev-qa-db-fra.com

Comment utiliser jQuery avec javascript dans angular 2

    import {Component, ElementRef, OnInit} from 'angular2/core';
    declare var jQuery:any;
    @Component({
      selector: 'jquery-integration',
      templateUrl: './components/jquery-integration/jquery-integration.html'
    })
    export class JqueryIntegration implements OnInit {
      elementRef: ElementRef;
      constructor(elementRef: ElementRef) {
        this.elementRef = elementRef;
      }
      ngOnInit() {
        jQuery(this.elementRef.nativeElement).draggable({
        containment:'#draggable-parent'
      });
    }
  }

JQuery peut-il être utilisé avec TypeScript dans Angular2 comme ci-dessus? Comment utiliser jQuery avec JavaScript dans Angular2?

jquerytypescriptangular
15
Buddhika Kulathilaka

À 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 angulaire ...
  • Ne l'utilisez pas pour les appels AJAX, il existe un moyen angulaire ...
  • Ne l'utilisez pas pour l'animation, ngAnimation arrive ...
20
Vlado Tesanovic

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 quand le document est chargé

  1. Exécuter npm install jquery --save

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

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

Pour la bibliothèque supportée @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 souhaitez utiliser la bibliothèque

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

7
Duy Tran

Une fois la bibliothèque JQuery TypeScript installée, référencez-la de cette manière.

///<reference path="../typings/jquery/jquery.d.ts" />

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! ^_^");
  }
}
7
Saurabh

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

///<reference path="../typings/jquery/jquery.d.ts" />

Ou vous pouvez 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 lorsqu’il modifie également le DOM. 

Laissez-moi vous expliquer cela à 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: string = 'DD/MM/YYYY HH:mm';
  @Input() showClose: boolean = true;
  @Input() sideBySide: boolean = false;
  @Input() ngModel;

  private onTouched = () => { };
  private onChange: (value: string) => 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 = (<Moment>(<any>event).date);
      if (date) {
        let value = date.format(this.format);
        this.onChange(value);
      }
    });
    this.writeValue(this.ngModel);
  }

  writeValue(date: string) {
    $(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'informer 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
1
Scandinave

Vous ne devez lier aucun composant angulaire avec jQuery à tout prix

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

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

 return function () {

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

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

}; 

}) (JQuery));

Avantages :

  • Le composant angulaire 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 nœud de document et le gestionnaire de chargement de fenêtre jQuery.

0
John Smith

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!
  }
}
0
詹特维