Wie man jQuery mit Javascript in angular 2 verwendet

Question

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

Kann jQuery mit TypeScript in Angular2 wie oben verwendet werden? Wie verwende ich jQuery mit JavaScript in Angular2?

Answer 1

Meiner Meinung nach: Wenn Sie es richtig machen und wenn Sie es minimal halten, sollten Sie damit gehen.

1. Installieren jQuery Typisierungen im Projekt: tsd jQuery installieren
2. lädt jQuery mit Script-Tag (oder einem anderen Lader ...)
3. Wrap jede jQuery-Plugin mit kantiger 2 Richtlinie

Beispiel:

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

Betrachten Sie diese Plunker:

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

Unzulässig:

• Verwenden Sie es nicht für DOM-Manipulation, gibt es Angular Art und Weise ...
• Verwenden Sie es nicht für AJAX-Aufrufe gibt es Angular Weg ...
• Verwenden Sie es nicht für die Animation, ngAnimation kommt ...

Answer 2

Sobald Sie die JQuery Typoskript Bibliothek installiert haben, verweisen sie auf diese Weise

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

Dann nehmen Sie die notwendigen Importe

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

Schreiben Sie jetzt die Klasse

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/html/app.component.html' 
}) 

export class AppComponent implements AfterViewInit { 
    ngAfterViewInit() { 
    // Your jQuery code goes here 
    $('#here').text("HALLO! ^_^"); 
    } 
} 

Answer 3

Was ich tue, um dieses Problem zu lösen:

Für Bibliothek unterstützt nicht @types/ und Bibliothek müssen geladen werden, wenn das Dokument geladen (mittlere Bibliotheken müssen in Script-Tag des Dokuments hinzufügen)

1. Run npm install jquery --save

2. hinzufügen js/CSS-Dateien in scripts oder styles von angular-cli.json wie

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

Für Bibliothek unterstützt @types/ nur npm install @types/jquery --save-dev laufen

die Bibliothek zu verwenden, fügen Sie declare var jQuery: any; vor Anmerkung @Directive oder @Component wollen die lib

P/S verwenden: Ich angular-cli mit webpack in meinem Projekt verwenden, möglicherweise unterschiedlich mit systemjs

Answer 4

Sie sollten nicht Angular Komponente mit jQuery um jeden Preis

binden
1. Laden Sie jQuery mit dem Tag <script>.
2. Fügen Sie den jQuery-Dokumentenready-Handler hinzu.

 

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

     return function() { 

     // DOM is ready and $ is a reference to jQuery 

     // It's time to things done using $ 

     }; 

    })(jQuery)); 

Pros:

• Angular Komponente von jQuery Abhängigkeit frei.
• Leichter zu testen, wie eine Komponente zu warten und wieder zu verwenden.
• jQuery-Code ist isoliert.

Wenn Sie jedoch die jQuery verwenden müssen innerhalb der Komponenten Dienste oder Richtlinien verwenden.

Wenn Sie Probleme mit dem Laden partieller Ansichten haben, verwenden Sie den jQuery-Ereignishandler für den Dokumentknoten und den jQuery-Fensterlasthandler.

Answer 5

Sie müssen angeben, wo Sie Ihre jQuery TypeScript-Definition finden können. Dies kann in einem typings.d erfolgen.ts-Datei, wo Sie Ihre Typisierungen so:

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

Oder Sie können Typisierungen über den Knoten installieren und lassen Sie Ihre Konfiguration laden sie automatisch. Das ist was eckig-cli tun.

Danach wird die Verwendung von jQuery mit Angular2 Sie einen fondamental Mechanismus verstehen müssen. Angular2 hat seine eigene dom-Repräsentation und jQuery manipuliert diese dom. Deshalb sagen die Leute: "Verwenden Sie jQuery nicht mit Angular2". Das ist nicht richtig. Angular2 kommt mit einer Lösung für dieses Problem. Es nennt es ControlValueAccessor. Das Ziel ist, eckig zu warnen, wenn Ihr jQuery-Plugin das DOM modifiziert und auch Ihr Plugin bei der Änderung des DOM eckig benachrichtigen lässt.

Lassen Sie mich dies durch ein Beispiel für Datumsauswahlkalender erklären.

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

Wichtige Dinge hier sind Writevalue Methode, die Angular2 Ihre jQuery-Plugin mitteilen lassen, dass eine Änderung produziert wird. Und registerOnChange, mit dem Sie Angular2 darüber informieren können, dass Ihr Plugin eine Änderung am DOM vornimmt.

Zusammenfassend ist der Schlüssel zur Verwendung von jQuery, Ihr jQuery-Plugin innerhalb der Direktive zu wickeln und einen CustomValueAccesor zu implementieren, um die Kommunikation zwischen Ihrem Plugin und Angular2 zu handhaben.

Um Typisierungen zu finden, können Sie DefinitlyTyped GitHub verwenden, das ein Repository für Typdefinitionen aus der Menge der js-Bibliothek ist.

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

Answer 6

können wir wie verwenden wie folgt:

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