Wie verwende ich das jQuery Plugin mit Angular 4?

Ich möchte einen Bereichsregler in einem Winkelprojekt verwenden und habe versucht, ein verfügbares Modul für Winkel 4 zu verwenden.

Es funktioniert gut während der Kompilierung, aber wenn ich versuche, es für die Bereitstellung zu erstellen, wird der folgende Fehler ausgegeben.

Ich habe nach der Option gesucht, das jQuery-Plugin direkt im Winkelprojekt zu verwenden, und ich erhalte nur Optionen dafür in Angular 2.

Gibt es eine Möglichkeit, jQuery-Plugins in Angular 4 zu verwenden?

Lass es mich wissen, bitte.

Danke im Voraus!

Ja, Sie können jquery mit Angular 4 verwenden

Schritte:

1) In index.htmlunter der Zeile in Tag setzen.

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

2) In der folgenden Komponente ts-Datei müssen Sie var wie folgt deklarieren

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

Und verwenden Sie diesen Code für die entsprechende HTML-Datei wie folgt:

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

Dies wird für Sie funktionieren. Vielen Dank

Installieren Sie jquery mit npm

npm install jquery --save

Typisierungen hinzufügen

npm install --save-dev @types/jquery

Fügen Sie Skripte zu angle-cli.json hinzu

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

Projekt erstellen und dienen

ng build

Hoffe das hilft! Viel Spaß beim Codieren

Installieren Sie jQuery mit NPM Jquery NPM

npm install jquery

Installieren Sie die jQuery-Deklarationsdatei

npm install -D @types/jquery

Importieren Sie jQuery in .ts

import * as $ from 'jquery';

Rufen Sie in der Klasse an

export class JqueryComponent implements OnInit {

constructor() {
}

ngOnInit() {
    $(window).click(function () {
        alert('ok');
        });
    }

}

Sie müssen keine jQuery-Variable deklarieren, während Sie @ types / jquery installiert haben.

declare var jquery:any;   // not required
declare var $ :any;   // not required

Sie sollten überall Zugriff auf jQuery haben.

Folgendes sollte funktionieren:

jQuery('.title').slideToggle();

Sie sollten jQuery nicht in Angular verwenden. Es ist zwar möglich (siehe andere Antworten auf diese Frage), es wird jedoch davon abgeraten. Warum?

Angular hat eine eigene Darstellung des DOM in seinem Speicher und verwendet keine Abfrageselektoren (Funktionen wie document.getElementById(id)) wie jQuery. Stattdessen erfolgt die gesamte DOM-Manipulation durch Renderer2 (und Angular-Direktiven wie * ngFor und * ngIf, die im Hintergrund / Framework-Code auf diesen Renderer2 zugreifen). Wenn Sie DOM mit jQuery selbst manipulieren, werden Sie früher oder später ...

1. Stoßen Sie auf Synchronisationsprobleme und lassen Sie Dinge zur richtigen Zeit falsch auf Ihrem Bildschirm erscheinen oder nicht verschwinden
2. Bei komplexeren Komponenten treten Leistungsprobleme auf, da die interne DOM-Darstellung von Angular an zone.js und den Änderungserkennungsmechanismus gebunden ist. Wenn Sie das DOM also manuell aktualisieren, wird der Thread, auf dem Ihre App ausgeführt wird, immer blockiert.
3. Haben Sie andere verwirrende Fehler, deren Ursprung Sie nicht kennen.
4. Die Anwendung kann nicht korrekt getestet werden (Jasmine erfordert, dass Sie wissen, wann Elemente gerendert wurden).
5. Angular Universal oder WebWorker können nicht verwendet werden

Wenn Sie jQuery wirklich einbinden möchten (um einen Prototyp aufzunehmen, den Sie zu 100% endgültig wegwerfen werden), empfehle ich, ihn zumindest in Ihre package.json aufzunehmen, npm install --save jqueryanstatt ihn von Googles CDN zu beziehen .

TLDR: Um zu lernen, wie man das DOM auf Angular-Weise manipuliert, lesen Sie bitte zuerst das offizielle Tutorial für Helden-Touren: https://angular.io/tutorial/toh-pt2 Wenn Sie auf Elemente zugreifen müssen, die sich weiter oben in der DOM-Hierarchie befinden (Eltern oder document body) oder aus einem anderen Grunde Richtlinien mögen *ngIf, *ngFor, kundenspezifische Richtlinien, Rohre und andere Winkel Dienstprogramme wie [style.background], [class.myOwnCustomClass] nicht erfüllt Ihre Bedürfnisse, Verwendung Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-Beispiel

Versuche dies:

import * as $ from 'jquery/dist/jquery.min.js';

Oder fügen Sie Skripte zu angle-cli.json hinzu:

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

und in Ihrer .ts-Datei:

declare var $: any;

Sie können Ihre jquery-Typisierungsversion wie folgt aktualisieren

npm install --save @types/jquery@latest

Ich hatte den gleichen Fehler und war 5 Tage lang im Internet, um eine Lösung zu finden. Es hat für mich funktioniert und es sollte für Sie funktionieren

Wenn Sie andere Bibliotheken in Projekten verwenden müssen - typescript - nicht nur in Projekten - angle -, können Sie nach tds (TypeScript Declaration File) suchen, die depares sind und Informationen zu Methoden, Typen, Funktionen usw. enthalten. Dies kann von TypeScript verwendet werden, normalerweise ohne dass ein Import erforderlich ist. deklariere var ist die letzte Ressource

npm install @types/lib-name --save-dev

Sie können Webpack verwenden, um es bereitzustellen . Es wird dann automatisch DOM injiziert.

module.exports = {
  context: process.cwd(),
  entry: {
    something: [
      path.join(root, 'src/something.ts')
    ],
    vendor: ['jquery']
  },
  devtool: 'source-map',
  output: {
    path: path.join(root, '/dist/js'),
    sourceMapFilename: "[name].js.map",
    filename: '[name].js'
  },
  module: {
    rules: [
      {test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader'}
    ]
  },
  resolve: {
    extensions: ['.ts', '.es6', '.js', '.json']
  },
  plugins: [

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),

  ]
};

Versuchen Sie es mit - deklarieren Sie let $: any;

oder importiere * als $ aus 'jquery / dist / jquery.min.js'; Geben Sie den genauen Pfad der Bibliothek an

ngOnInit() {
     const $ = window["$"];
     $('.flexslider').flexslider({
        animation: 'slide',
        start: function (slider) {
          $('body').removeClass('loading')
        }
     })
}