Comment faire pour importer jQuery pour Angular2 Tapuscrit projets?

Je veux enveloppez de jQuery dans un Angular2 directive.

J'ai installé la bibliothèque jQuery pour Typings dans mon projet avec la commande suivante:

typings install dt~jquery --save --global

Alors maintenant, j'ai jquery dossier sous typings/global dossier dans mon répertoire de projet. En outre, la nouvelle ligne a été ajoutée à ma typings.json fichier:

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

J'ai commencé à écrire une nouvelle Angular2 directive (que j'ai importé dans app-module fichier) mais je ne sais pas comment faire pour importer correctement bibliothèque jQuery. Voici mon fichier source:

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

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

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

Mais je ne peux pas utiliser ni $ ni jQuery. Quelle est la prochaine étape?

angulaire déjà fournir des fonctionnalités de base de jquery au lieu de les importer jquery comme il va causer des problèmes à long terme
Comment l'utiliser? Je voudrais utiliser .dropdown() méthode par exemple...
Je ne suis pas au courant de cette fonctionnalité.
Ok, de toute façon comment puis-je utiliser builtin bibliothèque jQuery?
.dropdown() n'est pas une fonction de jquery. Sont u à l'aide de bootstrap.js ? Si u sont à l'utiliser alors vous devez utiliser jquery ou il suffit de passer en ng-bootstrap qui est bootstrap wriiten angulaire angulaire de l'équipe de recherche de google.

OriginalL'auteur smartmouse | 2016-09-15

  1. 23

    Étape 1: obtenir jquery dans votre projet

    npm install jquery

    Étape 2: ajouter un type de jquery

    npm install -D @types/jquery

    Étape 3: Utiliser dans votre composant!

    import * as $ from 'jquery';

    Prêt à utiliser $!

    Oui, mais pas intellisense ;(
    Je l'ai fait et j'ai intellisense. Cependant tu as à ajouter jquery pour les types de tableau dans tsconfig.json.

    OriginalL'auteur Chinmay

  2. 3

    jQuery.service.ts

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

    index.ts`

    export * from './jQuery.service';

    app.le module.ts

    declare let jQuery : Object;

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

    comment faire pour utiliser Jquery dans le composant

       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');
}
}
}
    OpaqueToken est obsolète, mais vous pouvez simplement changer avec le InjectionToken comme décrit ici thecodegarden.net/...

    OriginalL'auteur user1089766

  3. 3

    Si vous utilisez "@angulaire/cli", puis installer:

    npm install jquery --save

    Deuxième étape de l'installation:

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

    Et de trouver le nom de votre fichier dans "angulaires-cli.json" sur la racine et ajoutez le à l'intérieur de comme comme:

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

    Maintenant, il va travailler.

    Vous aussi vous devez vous assurer que vous importez dans le Composant, utilisez: import * as $ from "jquery";

    OriginalL'auteur Sheo

  4. 1

    Vous devriez avoir un typings.json qui pointe vers votre jquery tapant fichier. Alors:

    systemjs.config (notice de la carte réglage de jquery)

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

    En composant:

    import $ from 'jquery';

    Ensuite utiliser $ comme d'habitude.

    Donc, n'ai-je pas besoin d'installer jQuery avec tyipings installer? Que dois-je écrire que le chemin d'accès à la carte de l'objet de systemjs.config.js fichier?
    vous avez besoin de la typings si vous allez utiliser "importer $ de 'jquery';". Si vous ne vous sentez pas que vous avez à déclarer un '$' variable avec le type "any" ou d'autre tapuscrit se plaint du mauvais type
    Si j'importe avec scripts balise html, je ne peux pas utiliser jQuery pour l'écriture de code dans mon Angular2 directives/composants.
    de ne pas importer avec les scripts de la balise. laissez tapuscrit et systemjs le faire pour vous et le faire de la même manière angulaire 2 t-elle.
    Pourquoi import * as $ from 'jquery' fonctionne? De toute façon, comment le faire fonctionner, même avec dropdown plugin jQuery?

    OriginalL'auteur vidalsasoon

  5. 1

    Vous pouvez également charger votre fichier Javascript jQuery dans un normal script balise dans le head section de votre index.html.

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

    Puis dans le composant ou de la directive où vous en avez besoin, il suffit de déclarer la $ variable nécessaires pour jQuery, puisque vous n'avez pas le typings pour tous les plugins dont vous avez besoin:

    import {Directive} from '@angular/core';
declare var $: any;
@Directive({
selector: "my-first-directive"
})
export class MyFirstDirective {
constructor() {
$(document).ready(function () {
alert("Hello World");
});
}
}
    Shoud je écrire la ligne suivante dans le systemjs.config.js} fichier? 'jquery': 'typings/global/jquery/index.d.ts'
    Non, pas besoin d'écrire quoi que ce soit dans le SystemJS config. Il suffit d'ajouter une <script> tag à votre index.html, où vous chargez jquery.js. Puis ajouter la référence pour les composants ou les directives, où vous en avez besoin.
    Désolé, j'ai peur de ne pas comprendre comment il fonctionne. Pouvez-vous me montrer un exemple ou un peu de code?
    c'est le oldschool façon de faire.
    Ne vais pas mentir - cette version de l'aide externe, JS fichiers vous permettra d'économiser beaucoup de maux de tête avec SystemJS ou l'emballage de l'outil.

    OriginalL'auteur rinukkusu

  6. 0

    Je ne pense pas qu'il devrait être un problème pour utiliser jquery angulaire 2. Si le typings et les dépendances de jquery sont installés correctement, alors il ne devrait pas être un problème pour utiliser jquery dans angulaire 2.

    J'ai été en mesure d'utiliser jquery dans mon angulaire 2 projet avec une bonne installation. Et par une installation correcte, je veux dire l'installation de jquery typings afin de le reconnaître en caractères d'imprimerie.

    Après, j'ai été en mesure d'utiliser jquery manière suivante:

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

    OriginalL'auteur Abhinandan

  7. 0

    C'est une vieille question, et il y a quelques réponses déjà. Cependant les réponses existantes sont trop complexes ( réponse de user1089766 contient de nombreux inutile fourre). Espérons que cela aide quelqu'un de nouveau.

    Ajouter <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> Dans votre index.html fichier.

    Créer jQuery.Service.ts:

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

    Dans vous fichier de module, ajoutez cette jQueryToken de fournisseur de: 

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

    Maintenant @Inject(jQueryToken) et il est prêt à l'emploi. Disons que vous voulez utiliser à l'intérieur d'un nom de composant ExperimentComponent alors: 

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

    Chaque fois que vous ouvrez ExperimentComponent la fonction d'alerte sera d'appel et les pop-up le message.

    OriginalL'auteur V.Tran