wake-up-neo.com

Wie importiere ich jQuery in Angular2 TypeScript-Projekte?

Ich möchte etwas jQuery-Code in eine Angular2-Direktive einbetten.

Ich habe die jQuery-Bibliothek für Typings mit folgendem Befehl in mein Projekt installiert:

typings install dt~jquery --save --global

Jetzt habe ich jquery Ordner unter typings/global Ordner in meinem Projektverzeichnis. Außerdem wurde meiner typings.json-Datei die folgende neue Zeile hinzugefügt:

{
    "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160602141332",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160807145350",
        "jquery": "registry:dt/jquery#1.10.0+20160908203239"
    }
}

Ich habe angefangen, eine neue Angular2-Direktive zu schreiben (die ich in die app-module-Datei importiert habe), weiß aber nicht, wie ich die jQuery-Bibliothek korrekt importieren kann. Hier ist meine Quelldatei:

import {Directive} from '@angular/core';

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}

Ich kann aber weder $ noch jQuery verwenden. Was ist der nächste Schritt?

16
smartmouse

Schritt 1: Jquery in deinem Projekt erhalten

npm install jquery

Schritt 2: Typ für Jquery hinzufügen

npm install -D @types/jquery

Schritt 3: Verwenden Sie es in Ihrer Komponente!

import * as $ from 'jquery';

Bereit, $ zu verwenden!

23
Chinmay

Wenn Sie "@ angle/cli" verwenden, installieren Sie Folgendes:

npm install jquery --save

Zweiter Schritt installieren:

install: npm install @types/jquery --save-dev

Und finden Sie Ihren Dateinamen in "angle-cli.json" im Stammverzeichnis und fügen Sie das Innere wie folgt hinzu:

script:["../node_modules/jquery/dist/jquery.min.js"]

Jetzt wird es funktionieren.

4
Sheo

jQuery.service.ts

 import { OpaqueToken } from '@angular/core'
export let JQ_TOKEN = new OpaqueToken('jQuery');

index.ts`

export * from './jQuery.service';

app.module.ts

declare let jQuery : Object;

@NgModule({
  providers: [
    { provide: TOASTR_TOKEN, useValue: toastr },
    { provide: JQ_TOKEN, useValue: jQuery },
})
export class AppModule { }

wie man Jquery in einer Komponente verwendet

   import { Component, Input, ViewChild, ElementRef, Inject } from '@angular/core'
import { JQ_TOKEN } from './jQuery.service'

@Component({
  selector: 'simple-modal',
  template: `
  <div id="{{elementId}}" #modalcontainer class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          <h4 class="modal-title">{{title}}</h4>
        </div>
        <div class="modal-body" (click)="closeModal()">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  styles: [`
    .modal-body { height: 250px; overflow-y: scroll; }
  `]
})
export class SimpleModalComponent {
  @Input() title: string;
  @Input() elementId: string;
  @Input() closeOnBodyClick: string;
  @ViewChild('modalcontainer') containerEl: ElementRef;

  constructor(@Inject(JQ_TOKEN) private $: any) {}

  closeModal() {
    if(this.closeOnBodyClick.toLocaleLowerCase() === "true") {
      this.$(this.containerEl.nativeElement).modal('hide');
    }
  }
}
3
user1089766

Sie können Ihre jQuery-Javascript-Datei auch in ein normales script-Tag im Abschnitt head Ihrer index.html laden.

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js" />

        ...
    </head>
    ...

Dann deklarieren Sie in der Komponente oder Direktive, in der Sie sie benötigen, einfach die für jQuery erforderliche $-Variable, da Sie nicht die Typisierung für alle benötigten Plugins haben:

import {Directive} from '@angular/core';

declare var $: any;

@Directive({
    selector: "my-first-directive"
})

export class MyFirstDirective {
    constructor() {
        $(document).ready(function () {
            alert("Hello World");
        });
    }
}
1
rinukkusu

Sie sollten eine typings.json haben, die auf Ihre Jquery-Typdatei verweist. Dann:

systemjs.config (Benachrichtigungszuordnung für Jquery festlegen)

System.config({
    defaultJSExtensions: true,
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    map: {
        'app':  'app',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
        material: 'npm:material-design-lite/dist/material.min.js',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        ....
    },
    packages: {
        app: { main: 'main', format: 'register', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    },
});

In der Komponente:

import $ from 'jquery';

Dann wie üblich $ verwenden.

1
vidalsasoon

Dies ist eine alte Frage und es gibt bereits einige Antworten. Vorhandene Antworten sind jedoch zu kompliziert (die Antwort des Benutzers 1089766 enthält viele unnötige Informationen). Hoffe das hilft jemandem neuem. 

Fügen Sie <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> in Ihre index.html-Datei ein.

Erstellen Sie jQuery.Service.ts:

import {InjectionToken} from "@angular/core";
export let jQueryToken = new InjectionToken('jQuery'); 

Fügen Sie in Ihrer Moduldatei dieses jQueryToken zum Provider hinzu: 

providers:[
{
    provide: jQueryToken,
    useValue: jQuery

}] 

Nun ist @Inject(jQueryToken) und es ist einsatzbereit. Angenommen, Sie möchten innerhalb eines Komponentennamens ExperimentComponent verwenden: 

import {Component, Inject, OnInit} from '@angular/core';
import {jQueryToken} from "./common/jquery.service";

@Component({
    selector: 'app-experiment',
    templateUrl: './experiment.component.html',
    styleUrls: ['./experiment.component.css']
})
export class ExperimentComponent implements OnInit {

    constructor(@Inject(jQueryToken) private $: any) {
        $(document).ready(function () {
            alert(' jQuery is working');
        });
    }

    ngOnInit() {
    }

}

Wenn Sie ExperimentComponent öffnen, ruft die Benachrichtigungsfunktion die Nachricht auf und zeigt sie an.

0
V.Tran

Ich denke nicht, dass es ein Problem sein sollte, Jquery mit Winkel 2 zu verwenden. Wenn die Typisierung und die Abhängigkeiten für Jquery ordnungsgemäß installiert sind, sollte es nicht ein Problem sein, Jquery in Winkel 2 zu verwenden.

Ich konnte jquery in meinem eckigen 2-Projekt mit korrekter Installation verwenden. Mit der richtigen Installation meine ich die Installation von Jquery-Typisierungen, um sie in TypeScript zu erkennen.

Danach konnte ich jquery folgendermaßen verwenden:

jQuery(document).ready({
    ()=>{
        alert("Hello!");
    };
});
0
Abhinandan