it-swarm.com.de

Wie benutze ich jQuery mit Angular?

Kann mir jemand sagen, wie man jQuery mit Angular benutzt?

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

Ich bin mir bewusst, dass es Abhilfemaßnahmen gibt, wie das Ändern der class oder id des DOM-Elements von vornherein, aber ich hoffe auf eine sauberere Art, dies zu tun.

287
Waog

Die Verwendung von jQuery von Angular2 ist im Vergleich zu ng1 ein Kinderspiel. Wenn Sie TypeScript verwenden, können Sie zunächst auf die jQuery TypeScript-Definition verweisen.

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

TypescriptDefinitions sind nicht erforderlich, da Sie einfach any als Typ für $ oder jQuery verwenden können.

In Ihrer Winkelkomponente sollten Sie mit @ViewChild() ein DOM-Element aus der Vorlage referenzieren. Nach dem Initialisieren der Ansicht können Sie die nativeElement-Eigenschaft dieses Objekts verwenden und an jQuery übergeben.

Wenn Sie $ (oder jQuery) als JQueryStatic deklarieren, erhalten Sie einen typisierten Verweis auf 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);

Dieses Beispiel ist auf Plunker verfügbar: http://plnkr.co/edit/Nq9LnK?p=preview

tslint beschwert sich darüber, dass chosen keine Eigenschaft für $ ist. Um dies zu beheben, können Sie der JQuery-Schnittstelle in Ihrer benutzerdefinierten * .d.ts-Datei eine Definition hinzufügen

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

Warum macht jeder es zu einer Raketenwissenschaft? ... Für jeden, der ein paar grundlegende Dinge über statische Elemente tun muss, zum Beispiel body, einfach Folgendes:

  1. In index.html add script-Tag mit dem Pfad zu Ihrer Jquery-Bibliothek ist es egal, wo (auf diese Weise können Sie auch IE Bedingungs-Tags verwenden, um eine niedrigere Version von Jquery für IE9 und weniger zu laden).
  2. In Ihrem export component-Block gibt es eine Funktion, die Ihren Code aufruft: $("body").addClass("done"); Normalerweise führt dies zu einem Deklarationsfehler. Nach allen Importen in dieser .ts-Datei fügen Sie declare var $:any; hinzu, und Sie können loslegen!
117
Starwave

Das hat bei mir funktioniert.

SCHRITT 1 - Erste Dinge zuerst

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

SCHRITT 2 - IMPORTIEREN

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

#UPDATE - Feb - 2017

In letzter Zeit schreibe ich Code mit ES6 anstelle von TypeScript und kann import ohne * as $ im import statement. So sieht es jetzt aus:

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

Viel Glück.

87
Akash

Jetzt ist es sehr einfach geworden. Sie können dies tun, indem Sie einfach die Variable jQuery mit einem beliebigen Typ im Angular2-Controller deklarieren.

declare var jQuery:any;

Fügen Sie dies unmittelbar nach den Importanweisungen und vor dem Komponentendekorateur hinzu.

Um auf ein Element mit der ID X oder Klasse X zuzugreifen, müssen Sie nur das tun

jQuery("#X or .X").someFunc();
52
Devesh Jadon

Ein einfacher Weg:

1. include script

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. erklären

meine.komponente.ts

declare var $: any;

3. Verwendung

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

Bitte folgen Sie diesen einfachen Schritten. Es hat für mich funktioniert. Beginnen wir mit einer neuen Winkel 2-App, um Verwirrungen zu vermeiden. Ich benutze Angular cli. Installieren Sie es also, falls Sie es noch nicht haben . https://cli.angular.io/

Schritt 1: Erstellen Sie eine Demo-App für Winkel 2

ng new jquery-demo

sie können einen beliebigen Namen verwenden. Überprüfen Sie nun, ob es funktioniert, indem Sie unterhalb von cmd laufen.

ng serve

sie sehen "App funktioniert!" im Browser.

Schritt 2: Installieren Sie Bower (Ein Paketmanager für das Web)

Führen Sie diesen Befehl auf cli aus (stellen Sie sicher, dass Sie auf 'jquery-demo' zeigen, wenn Sie den Befehl cd nicht verwenden):

npm i -g bower --save

Erstellen Sie nach erfolgreicher Installation von Bower jetzt eine 'bower.json'-Datei mit dem folgenden Befehl:

bower init

Sie werden nach Eingaben gefragt. Drücken Sie einfach die Eingabetaste für alle, wenn Sie Standardwerte wünschen, und geben Sie am Ende "Ja" ein, wenn Sie nach "Sieht gut?"

Nun sehen Sie eine neue Datei (bower.json) im Ordner "jquery-demo". Weitere Informationen finden Sie unter https://bower.io/

Schritt 3: Jquery installieren

Führen Sie diesen Befehl aus

bower install jquery --save

Es wird ein neuer Ordner (bower_components) erstellt, der den Jquery-Installationsordner enthält. Jetzt haben Sie jquery im Ordner 'bower_components' installiert.

Schritt 4: Hinzufügen eines Jquery-Speicherorts in der Datei 'angle-cli.json'

Öffnen Sie die Datei 'angle-cli.json' (im Ordner 'jquery-demo') und fügen Sie den Speicherort der Jquery in "Skripts" hinzu. Es wird so aussehen:

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

Schritt 5: Schreiben Sie einfachen Jquery-Code zum Testen von.

Öffnen Sie die Datei 'app.component.html' und fügen Sie eine einfache Codezeile hinzu. Die Datei sieht folgendermaßen aus:

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

Öffnen Sie nun die Datei 'app.component.ts' und fügen Sie die JQuery-Variablendeklaration und den Code für das 'p'-Tag hinzu. Sie sollten auch Lifecycle Hook ngAfterViewInit () verwenden. Nach den Änderungen sieht die Datei folgendermaßen aus:

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

Führen Sie nun die angle 2-App mit dem Befehl 'ng serve' aus und testen Sie sie. Es sollte funktionieren.

24

Sie können den Lebenszyklus-Hook ngAfterViewInit () implementieren, um einige DOM-Manipulationen hinzuzufügen

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Seien Sie vorsichtig, wenn Sie einen Router verwenden, da angle2 Ansichten wiederaufbereiten kann. Sie müssen also sicherstellen, dass die DOM-Elementmanipulationen nur beim ersten Aufruf von afterViewInit ausgeführt werden.

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;
        }
    }
}
13
Mourad Zouabi

Ich mache es auf einfachere Weise - zuerst installiere ich jquery von npm in der Konsole: npm install jquery -S und dann in der Komponentendatei schreibe ich einfach: let $ = require('.../jquery.min.js') und es funktioniert! Hier ein vollständiges Beispiel aus meinem 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});
      ...
    }
}

In teplate habe ich zum Beispiel:

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

EDIT

Alternativ anstelle von:

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

benutzen

declare var $: any;

und in Ihre index.html setzen:

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

Dadurch wird Jquery nur einmal global initialisiert. Dies ist beispielsweise für die Verwendung von modalen Fenstern in Bootstraps wichtig.

12

// jquerynpm install jquery --save installieren

// Installation der Typdefinition für die Jquerytypings install dt~jquery --global --save

// Hinzufügen der Jquery-Bibliothek zur Build-Konfigurationsdatei wie angegeben (in der Datei "angle-cli-build.js")

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

// führe den Build aus, um die Jquery-Bibliothek zum Build hinzuzufügen ng build

// Hinzufügen der relativen Pfadkonfiguration (in 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'}};

// Importiere die Jquery-Bibliothek in deiner Komponentendatei

import 'jquery';

unten sehen Sie den Code-Ausschnitt meiner Beispielkomponente

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(){}
}
10
BALA

schritt 1: Verwenden Sie den Befehl: npm install jquery --save 

schritt 2: Sie können Winkel einfach importieren als:

importiere $ aus 'jquery';

das ist alles .

Ein Beispiel wäre:

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


}
10

Wenn Sie angle-cli verwenden, können Sie Folgendes tun: 

  1. Installiere die Abhängigkeit

    npm install jquery --save

    npm install @ types/jquery --save-dev

  2. Importiere die Datei

    Fügen Sie "../node_modules/jquery/dist/jquery.min.js" zum Abschnitt "script" in der Datei .angular-cli.json hinzu

  3. Jquery deklarieren:

    Fügen Sie dem Abschnitt "types" der Datei "tsconfig.app.json" "$" hinzu

Weitere Details finden Sie unter official angle cli doc

9
Jahal

Verwenden von Jquery in Angular2 (4) 

Folgen Sie diesen Setps

installieren Sie die Definitionen Jquery und Juqry 

Für die Installation von Jquery npm install jquery --save

Für die Definition des Jquery-Typs Installation npm install @types/jquery --save-dev

und importieren Sie dann einfach die 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 
}
8
Vasim Hayat

Da ich ein Dummkopf bin, dachte ich, dass es gut wäre, einen funktionierenden Code zu haben. 

Außerdem hat die Angular2-Typisierungsversion von angle-Winkelmesser Probleme mit jQuery$, sodass die von mir akzeptierte Antwort kein sauberes Kompilieren ergibt. 

Hier sind die Schritte, die ich arbeiten muss: 

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

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

Einfach schreiben 

declare var $:any;

nach allen Importabschnitten können Sie jQuery verwenden und die jQuery-Bibliothek in Ihre index.html-Seite einschließen

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

es hat für mich funktioniert 

2
Divyesh Patel

Ich überspringe die Installation von jquery, da dieser Punkt in allen vor mir erstellten Beiträgen erwähnt wurde. Sie haben also bereits Jquery installiert. So importieren Sie t in Ihre Komponente 

import * as $ from 'jquery';

funktioniert, aber es gibt eine andere "eckige" Möglichkeit, dies durch Erstellen eines Dienstes zu tun.

Schritt Nr. 1: Erstellen Sie die Datei 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');

Schritt. Nein. 2: registriere den Dienst in app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Schritt Nr. 3: injizieren Sie den Dienst in Ihre Komponente 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');
    }
}

Ich wäre sehr dankbar, wenn jemand die Vor- und Nachteile beider Methoden erklären kann: DI jquery als Dienst vs. 

2
azakgaim


1) Zugriff auf DOM in der Komponente.

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

Sie können jQuery auf folgende Weise einschließen. 2) Fügen Sie Ihre Jquery-Datei in index.html ein, bevor das angle2 geladen wird

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

Sie können Jquery folgendermaßen verwenden: Hier verwende ich JQuery Ui-Datumsauswahl.

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

Diese Arbeit für mich.

2
ayyappa maddi

Sie können auch versuchen, es mit dem "InjectionToken" zu importieren. Wie hier beschrieben: Verwenden Sie jQuery in Angular/TypeScript ohne Typdefinition

Sie können einfach die globale jQuery-Instanz einfügen und verwenden. Dafür benötigen Sie keine Typdefinitionen oder Typisierungen.

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 },
];

Wenn Sie in Ihrem app.module.ts richtig eingestellt sind:

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

Sie können es in Ihren Komponenten verwenden:

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

Hier ist was für mich gearbeitet hat - Angular 2 mit Webpack

Ich habe versucht, $ als Typ any zu deklarieren, aber bei jedem Versuch, ein beliebiges JQuery-Modul zu verwenden, das ich (zum Beispiel) erhielt, ist $(..).datepicker() keine Funktion

Da ich Jquery in meine vendor.ts-Datei aufgenommen habe, habe ich es einfach in meine Komponente importiert 

import * as $ from 'jquery';

Ich kann jetzt Jquery-Plugins (wie bootstrap-datetimepicker) verwenden

1
raghav710

Die effektivste Methode, die ich gefunden habe, ist die Verwendung von setTimeout mit der Zeit 0 im Konstruktor für Seite/Komponente. Lassen Sie uns jQuery im nächsten Ausführungszyklus ausführen, nachdem Angular alle untergeordneten Komponenten geladen hat. Einige andere Komponentenmethoden könnten verwendet werden, aber alle, die ich ausprobiert habe, funktionieren am besten, wenn sie in einem setTimeout ausgeführt werden.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}
1
Urgo

Globale Bibliotheksinstallation als Offizielle Dokumentation hier

  1. Install von npm:

    npm install jquery --save

  2. Erforderliche Skriptdateien zu Skripten hinzufügen:

    "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Starten Sie den Server neu, wenn Sie ihn ausführen, und er sollte mit Ihrer App funktionieren.


Wenn Sie eine einzelne Komponente verwenden möchten, verwenden Sie import $ from 'jquery'; in Ihrer Komponente

0
Amr Ibrahim

Installieren Sie Jquery

Terminal $ npm install jquery

(Für Bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Fügen Sie dann die import-Anweisung zu app.module.ts hinzu.

import 'jquery'

(Für Bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Jetzt benötigen Sie keine <SCRIPT>-Tags mehr, um auf das JavaScript zu verweisen.

(Jedes CSS, das Sie verwenden möchten, muss noch in styles.css referenziert werden.)

@import "~bootstrap/dist/css/bootstrap.min.css";
0
Carter Medlin

Andere bereits gebucht. aber ich gebe hier ein einfaches Beispiel, damit einige Neuankömmlinge helfen können.

Schritt-1: In Ihrer index.html-Dateireferenz jquery cdn

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

Schritt-2: Nehmen wir an, wir möchten div auf Knopfdruck ein- oder ausblenden:

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

Schritt-3: In der folgenden Komponentendatei deklariert der Import $ als:

declare var $: any;

als Funktion wie unten erstellen:

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

Es funktioniert mit den neuesten Angular und JQuery

0
Mehdi Jalal

Wenn Sie Angular verwenden, versuchen Sie, die jquery-Bibliothek nicht zu verwenden. Versuchen Sie es mit den Funktionen und Bibliotheken, die für das Winkelgerüst erstellt wurden. Wenn Sie die jQuery-Funktionen wie find () , html () , next () und usw. verwenden möchten, empfehle ich die Verwendung der reinen js. Beispiel: querySelector () , innerHTML , parentElement und etc ...

0

Mit Angular Cli

 npm install jquery --save

In angle.json unter Skripte Array

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] //for latest version copy full path of node_modules>jquery>dist>jquery.min.js to avoid path error

Um jQuery jetzt zu verwenden, müssen Sie es nur wie folgt in die Komponente importieren, die Sie für jQuery verwenden möchten.

import * as $ from 'jquery';

Zum Beispiel mit jQuery in der Root-Komponente

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 {


  public ngOnInit()
  {
    //jQuery code
        });
    });
  }
}
0
varundhariyal