Come utilizzare jQuery Plugin con Angular 4?

Voglio utilizzare un dispositivo di scorrimento della gamma in un progetto angolare e ho provato a utilizzare un modulo disponibile per angolare 4.

Funziona bene durante la compilazione, ma quando provo a crearlo per la distribuzione, genera l'errore seguente.

Ho verificato l'opzione di utilizzare il plug-in jQuery direttamente nel progetto angular e sto solo ottenendo opzioni per farlo in Angular 2.

C'è un modo in cui possiamo usare i plugin jQuery in Angular 4?

Per favore mi faccia sapere.

Grazie in anticipo!

Sì, puoi usare jquery con Angular 4

Passaggi:

1) In index.htmlmettere sotto la riga nel tag.

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

2) Nel file componente ts sotto devi dichiarare var in questo modo

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

}

E usa questo codice per il file html corrispondente in questo modo:

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

Questo funzionerà per te. Grazie

Installa jquery con npm

npm install jquery --save

Aggiungi digitazioni

npm install --save-dev @types/jquery

Aggiungi script a angular-cli.json

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

Costruisci progetto e servi

ng build

Spero che sia di aiuto! Divertiti con la codifica

Installa jQuery utilizzando NPM Jquery NPM

npm install jquery

Installa il file di dichiarazione jQuery

npm install -D @types/jquery

Importa jQuery all'interno di .ts

import * as $ from 'jquery';

chiama in classe

export class JqueryComponent implements OnInit {

constructor() {
}

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

}

Non è necessario dichiarare alcuna variabile jQuery durante l'installazione di @ types / jquery.

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

Dovresti avere accesso a jQuery ovunque.

Quanto segue dovrebbe funzionare:

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

Non dovresti usare jQuery in Angular. Sebbene sia possibile (vedi altre risposte per questa domanda), è scoraggiato. Perché?

Angular mantiene una propria rappresentazione del DOM nella sua memoria e non utilizza selettori di query (funzioni come document.getElementById(id)) come jQuery. Invece tutta la manipolazione del DOM viene eseguita da Renderer2 (e direttive Angular come * ngFor e * ngIf che accedono a quel Renderer2 in background / codice del framework). Se manipoli tu stesso DOM con jQuery, prima o poi ...

1. Si verificano problemi di sincronizzazione e le cose appaiono in modo errato o non scompaiono al momento giusto dallo schermo
2. Avere problemi di prestazioni in componenti più complessi, poiché la rappresentazione DOM interna di Angular è associata a zone.js e al suo meccanismo di rilevamento delle modifiche, quindi l'aggiornamento manuale del DOM bloccherà sempre il thread su cui è in esecuzione l'app.
3. Hai altri errori confusi di cui non conosci l'origine.
4. Non essere in grado di testare correttamente l'applicazione (Jasmine richiede che tu sappia quando gli elementi sono stati renderizzati)
5. Non essere in grado di utilizzare Angular Universal o WebWorkers

Se vuoi davvero includere jQuery (per il duck tap di qualche prototipo che butterai via definitivamente al 100%), ti consiglio di includerlo almeno nel tuo package.json npm install --save jqueryinvece di ottenerlo dal CDN di Google.

TLDR: Per imparare a manipolare il DOM in modo angolare, segui prima il tutorial ufficiale del tour degli eroi: https://angular.io/tutorial/toh-pt2 Se devi accedere a elementi più in alto nella gerarchia DOM (genitore o document body) o per qualche altra ragione direttive piace *ngIf, *ngFor, direttive personalizzati, tubi e altre utilità come angolari [style.background], [class.myOwnCustomClass] non soddisfano le vostre esigenze, uso Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-esempio

Prova questo:

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

Oppure aggiungi script a angular-cli.json:

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

e nel tuo file .ts:

declare var $: any;

Puoi aggiornare la tua versione di battitura jquery in questo modo

npm install --save @types/jquery@latest

Ho avuto lo stesso errore e sono stato a se per 5 giorni navigando in rete per una soluzione.it ha funzionato per me e dovrebbe funzionare per te

Se hai la necessità di utilizzare altre librerie nei progetti --typescript - non solo nei progetti - angle - puoi cercare tds (TypeScript Declaration File) che sono depares e che contengono informazioni su metodi, tipi, funzioni, ecc., che può essere utilizzato da TypeScript, di solito senza la necessità di importazione. dichiarare var è l'ultima risorsa

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

Puoi usare webpack per fornirlo . Verrà quindi iniettato DOM automaticamente.

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

  ]
};

Prova a usare - declare let $: any;

oppure importa * come $ da "jquery / dist / jquery.min.js"; fornire il percorso esatto della libreria lib

la soluzione al dattiloscritto:

Passo 1:

npm install jquery

npm install --save-dev @types/jquery

step2: in Angular.json aggiungi:

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

o in index.html aggiungi:

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

step3: in * .component.ts dove vuoi usare jquery

import * as $ from 'jquery';  // dont need "declare let $"

Quindi puoi usare jquery come javaScript. In questo modo, VScode supporta l'auto-suggerimento tramite Typescript

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