Jak korzystać z wtyczki jQuery w Angular 4?

Chcę użyć suwaka zakresu w projekcie kątowym i próbowałem użyć jednego dostępnego modułu dla kątowego 4.

Działa dobrze podczas kompilacji, ale kiedy próbuję zbudować go do wdrożenia, generuje poniższy błąd.

Sprawdziłem opcję używania wtyczki jQuery bezpośrednio w projekcie angular i dostaję opcje robienia tego tylko w Angular 2.

Czy jest jakiś sposób, abyśmy mogli używać wtyczek jQuery w Angular 4?

Proszę daj mi znać.

Z góry dziękuję!

Tak, możesz używać jquery z Angular 4

Kroki:

1) index.htmlUmieść poniżej linii w tagu.

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

2) W poniższym pliku komponentu ts musisz zadeklarować var ​​w ten sposób

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

}

I użyj tego kodu dla odpowiedniego pliku HTML w następujący sposób:

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

To zadziała dla Ciebie. Dzięki

Zainstaluj jquery przy użyciu npm

npm install jquery --save

Dodaj typy

npm install --save-dev @types/jquery

Dodaj skrypty do angular-cli.json

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

Buduj projekt i obsługuj

ng build

Mam nadzieję że to pomoże! Ciesz się kodowaniem

Zainstaluj jQuery za pomocą NPM Jquery NPM

npm install jquery

Zainstaluj plik deklaracji jQuery

npm install -D @types/jquery

Importuj jQuery do .ts

import * as $ from 'jquery';

zadzwoń w klasie

export class JqueryComponent implements OnInit {

constructor() {
}

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

}

Nie musisz deklarować żadnej zmiennej jQuery podczas instalowania @ types / jquery.

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

Powinieneś mieć dostęp do jQuery wszędzie.

Powinno działać:

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

Nie należy używać jQuery w Angular. Chociaż jest to możliwe (zobacz inne odpowiedzi na to pytanie), odradza się. Czemu?

Angular przechowuje własną reprezentację DOM w swojej pamięci i nie używa selektorów zapytań (takich jak funkcje document.getElementById(id)), takich jak jQuery. Zamiast tego cała manipulacja DOM jest wykonywana przez Renderer2 (i dyrektywy Angular, takie jak * ngFor i * ngIf, które uzyskują dostęp do tego Renderer2 w kodzie tła / struktury). Jeśli samodzielnie manipulujesz DOM za pomocą jQuery, prędzej czy później ...

1. Występują problemy z synchronizacją i pojawiają się błędy lub nie znikają we właściwym czasie z ekranu
2. Występują problemy z wydajnością w bardziej złożonych komponentach, ponieważ wewnętrzna reprezentacja DOM Angulara jest powiązana z zone.js i jego mechanizmem wykrywania zmian - więc ręczna aktualizacja DOM zawsze blokuje wątek, w którym działa Twoja aplikacja.
3. Masz inne zagmatwane błędy, których nie znasz.
4. Brak możliwości prawidłowego przetestowania aplikacji (Jasmine wymaga, abyś wiedział, kiedy elementy zostały wyrenderowane)
5. Brak możliwości korzystania z Angular Universal lub WebWorkers

Jeśli naprawdę chcesz dołączyć jQuery (do nagrywania przez kaczkę jakiegoś prototypu, który w 100% definitywnie wyrzucisz), polecam przynajmniej dołączyć go do pliku package.json npm install --save jqueryzamiast pobierać go z CDN Google.

TLDR: Aby dowiedzieć się, jak manipulować DOM w sposób Angular, najpierw zapoznaj się z oficjalnym samouczkiem przewodnika po bohaterach: https://angular.io/tutorial/toh-pt2 Jeśli potrzebujesz dostępu do elementów znajdujących się wyżej w hierarchii DOM (rodzic lub document body) lub z jakiegoś innego powodu dyrektywy jak *ngIf, *ngForniestandardowe dyrektywy, rury i inne narzędzia, takie jak kątowe [style.background],[class.myOwnCustomClass] nie spełniają Twoich potrzeb, wykorzystanie Renderer2: https://www.concretepage.com/angular-2/angular-4 -renderer2-przykład

Spróbuj tego:

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

Lub dodaj skrypty do angular-cli.json:

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

aw pliku .ts:

declare var $: any;

Możesz zaktualizować swoją wersję jquery w ten sposób

npm install --save @types/jquery@latest

Miałem ten sam błąd i byłem w przypadku, gdy przez 5 dni surfowałem po sieci w poszukiwaniu rozwiązania. Zadziałało dla mnie i powinno działać dla ciebie

Jeśli potrzebujesz użyć innych bibliotek w projektach - typescript - nie tylko w projektach - angle - możesz poszukać tds (TypeScript Declaration File), które są depares i które mają informacje o metodach, typach, funkcjach itp., które mogą być używane przez TypeScript, zwykle bez konieczności importowania. deklaruj var jest ostatnim zasobem

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

Możesz użyć webpacka, aby to zapewnić . Następnie zostanie automatycznie wstrzyknięty DOM.

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

  ]
};

Spróbuj użyć - zadeklaruj let $: any;

lub importuj * jako $ z 'jquery / dist / jquery.min.js'; podaj dokładną ścieżkę do lib

rozwiązanie maszynopisu:

Krok 1:

npm install jquery

npm install --save-dev @types/jquery

krok 2 : w Angular.json dodaj:

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

lub w index.html dodaj:

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

step3: w * .component.ts, gdzie chcesz użyć jquery

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

Następnie możesz użyć jquery tak samo jak javaScript. W ten sposób VScode obsługuje automatyczne sugestie przez Typescript

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