Jak korzystać z jQuery z Angular?


343

Czy ktoś może mi powiedzieć, jak korzystać z jQuery z Angular ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

Wiem, że istnieją obejścia takie jak manipulowanie z góry klasą lub identyfikatorem elementu DOM, ale mam nadzieję na lepszy sposób na zrobienie tego.


2
Nie wiem, z której wersji korzystałeś w momencie publikowania, ale dla mnie dodanie JQuery cdn w index.html wystarczy, aby wywołać $ w komponencie
FreedomBanana


10
Chociaż niektóre funkcje jQuery (zwłaszcza wtyczki lub jQueryUI) mogą być bardzo przydatne w aplikacji Angular2, nie jest najlepszą praktyką sprawdzanie i manipulowanie DOM z komponentów Angular2, jak opisano w pytaniu. W aplikacjach Angular2 elementy DOM, którymi chcesz manipulować, powinny być powiązane z modelem komponentu. Stan elementów DOM powinien ulec zmianie zgodnie ze zmianami modelu. Sprawdź tę odpowiedź: stackoverflow.com/questions/42411744/best-practice-of-angular-
Benyamin Shoham

6
Myślę, że prawidłowa odpowiedź na to brzmi: ty nie. Angular jest bardziej zaawansowany i nowszy niż jquery, nie jest przestarzały i ma dużo czystszy kod
mast3rd3mon

7
Dlaczego dana osoba powinna używać JQuery z Angular?
Cristian Traìna

Odpowiedzi:


331

Korzystanie z jQuery z Angular2 jest dziecinnie proste w porównaniu do ng1. Jeśli używasz TypeScript, możesz najpierw odwołać się do definicji maszynopisu jQuery.

tsd install jquery --save
or
typings install dt~jquery --global --save

TypescriptDefinitions nie są wymagane, ponieważ można po prostu użyć anyjako typu dla $lubjQuery

W swoim komponencie kątowym powinieneś odwoływać się do elementu DOM z szablonu, używając @ViewChild()Po zainicjowaniu widoku możesz użyć nativeElementwłaściwości tego obiektu i przejść do jQuery.

Deklaracja $(lub jQuery) jako JQueryStatic da ci wpisane odwołanie do jQuery.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

Ten przykład jest dostępny na plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint będzie narzekać, że chosennie jest własnością na $, aby to naprawić, możesz dodać definicję do interfejsu JQuery w niestandardowym pliku * .d.ts

interface JQuery {
    chosen(options?:any):JQuery;
}    

2
Nie jestem pewien, dlaczego to setTimeoutobejście jest wymagane. Próbowałem z kilkoma innymi komponentami jQuery i wydaje się, że wszystkie wymagają tego obejścia dla poprawnej inicjalizacji. Mam nadzieję, że zmieni się to w przyszłym wydaniu ng2
werenskjold

7
nowe wywołania zwrotne zostały dodane w alpha37 github.com/angular/angular/blob/2.0.0-alpha.37/CHANGELOG.md rdzeń: dodane po hookachContentInit, afterViewInit i afterViewChecked (d49bc43), zamykają # 3897
Mourad Zouabi

18
nie jest to trudne do skonfigurowania, ale z pewnością nie jest to „powiew” w porównaniu do kąta 1. w kątowniku 1 nie musiałeś nic robić i mógłbyś po prostu użyć jquery gdziekolwiek. kątowy 1 jest zbudowany na wierzchu jquery.
user428517

8
Po zainstalowaniu definicji przez typy JQueryStatic nadal nie jest rozpoznawany.
Gonzalo,

4
Myślę, że musimy to trochę zaktualizować, ponieważ teraz używamy NPM do pisania
Jackie

122

Dlaczego wszyscy sprawiają, że jest to rakieta? Dla każdego, kto musi zrobić kilka podstawowych rzeczy na elementach statycznych, na przykład bodytag, po prostu wykonaj następujące czynności:

  1. W pliku index.html dodaj scriptznacznik ze ścieżką do biblioteki jquery, nie ma znaczenia gdzie (w ten sposób możesz również użyć tagów warunkowych IE, aby załadować niższą wersję jquery dla IE9 i mniejszą).
  2. W twoim export componentbloku jest funkcja, która wywołuje twój kod: $("body").addClass("done");Normalnie powoduje to błąd deklaracji, więc zaraz po wszystkich importach do tego pliku .ts, dodaj declare var $:any;i gotowe!

20
Nie działa dla mnie. Będę więc studiował naukę o rakietach. :)
Prajeet Shrestha

11
Punktem kątowym 2 jest usunięcie złożoności radzenia sobie z DOM. Angular 2 ma algorytm różnicowy, który skutecznie renderuje twoje komponenty dla ciebie, dlatego lepiej oszukać jquery, że manipuluje DOM, kierując go do komponentu angular 2, zamiast bezpośrednio manipulować DOM.
ken

4
intellisense, mój przyjacielu, dlatego
Ayyash

5
declare var $:any;dla zwycięstwa!
tylerlindell,

2
To zdecydowanie działa, ale jeśli nie żyjesz już w epoce kamienia łupanego, wybierz zamiast tego zaakceptowaną odpowiedź.
jlh

112

To działało dla mnie.

KROK 1 - Najpierw najważniejsze

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

KROK 2 - IMPORT

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#AKTUALIZACJA - Feb - 2017

Ostatnio piszę kod z ES6zamiast typescripti jestem w stanie importbez * as $w import statement. Tak to wygląda teraz:

import $ from 'jquery';
//
$('#elemId').width();

Powodzenia.


50
Zajęło mi godzinę, aby dowiedzieć się, jak umieścić jQuery w Angular 2 (właściwie) ... Jestem pewien, że tworzenie stron internetowych idzie wstecz.
Starboy

1
Aby zaimportować $ z pracy 'jquery', musisz ustawić --allowJs
titusfx

1
import * as $ from 'jquery';w app.module.ts, aby udostępnić go dla całego projektu. I btw: „Dlaczego - zapisz zamiast - zapisz-dev?”
Martin Schneider,

3
import $ from 'jquery';To najładniejsza instrukcja importu jquery na tej stronie imo. Dokładnie tak, jak chciałbym, żeby to wyglądało.
cs_pupil

1
@Starboy, ponieważ nie powinieneś potrzebować żadnego JQuery w aplikacji Angular, a jeśli tak, najprawdopodobniej robisz coś złego.
phil294,

55

Teraz stało się to bardzo łatwe. Możesz to zrobić, po prostu deklarując zmienną jQuery z dowolnym typem wewnątrz kontrolera Angular2.

declare var jQuery:any;

Dodaj to tuż po instrukcjach importu i przed dekoratorem komponentów.

Aby uzyskać dostęp do dowolnego elementu o identyfikatorze X lub klasie X, wystarczy zrobić

jQuery("#X or .X").someFunc();

Zweryfikowano, działa to dla Angular 2 z webpack (szablon SPA generowany przez Yeoman Aspnetcore SPA). Często najprostsze podejście działa najlepiej! Dzięki.
binjiezhao

1
Używam go w moim projekcie, ale brak tej metody polega na tym, że tracimy wszystkie mocne możliwości typów jQuery :)
trungk18

Praca w Angular 6 (6.0.3)
Alejandro Morán

Praca w: Angular CLI: 7.1.4 Węzeł: 10.15.0
Lance

28

Prosty sposób:

1. dołącz skrypt

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. deklarować

my.component.ts

declare var $: any;

3. użyj

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

Pracował dla mnie. Ale zamiast implementować OnInit (którego Angular nie chciał zaakceptować) użyłem wewnątrz MyComponent ngOnInit () {// moje jQuery tutaj}
Ilya Kushlianski

25

Wykonaj te proste kroki. To zadziałało dla mnie. Zacznijmy od nowej aplikacji kątowej 2, aby uniknąć nieporozumień. Używam Angular cli. Więc zainstaluj go, jeśli jeszcze go nie masz. https://cli.angular.io/

Krok 1: Utwórz demo kątową aplikację 2

ng new jquery-demo

możesz użyć dowolnej nazwy. Teraz sprawdź, czy działa, uruchamiając poniżej cmd. (Teraz upewnij się, że wskazujesz na „jquery-demo”, jeśli nie używasz polecenia cd)

ng serve

zobaczysz „aplikacja działa!” w przeglądarce.

Krok 2: Zainstaluj Bower (menedżer pakietów dla Internetu)

Uruchom to polecenie na cli (upewnij się, że wskazujesz na 'jquery-demo', jeśli nie używasz polecenia cd):

npm i -g bower --save

Teraz, po udanej instalacji bower, utwórz plik „bower.json” za pomocą poniższego polecenia:

bower init

Poprosi o dane wejściowe, po prostu naciśnij klawisz Enter dla wszystkich, jeśli chcesz wartości domyślne, a na końcu wpisz „Tak”, gdy pojawi się pytanie „Wygląda dobrze?”

Teraz możesz zobaczyć nowy plik (bower.json) w folderze „jquery-demo”. Możesz znaleźć więcej informacji na https://bower.io/

Krok 3: Zainstaluj jquery

Uruchom to polecenie

bower install jquery --save

Stworzy nowy folder (bower_components), który będzie zawierał folder instalacyjny jquery. Teraz masz zainstalowaną jquery w folderze „bower_components”.

Krok 4: Dodaj lokalizację jquery w pliku „angular-cli.json”

Otwórz plik „angular-cli.json” (obecny w folderze „jquery-demo”) i dodaj lokalizację jquery w „skryptach”. Będzie to wyglądać tak:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

Krok 5: Napisz prosty kod jquery do testowania

Otwórz plik „app.component.html” i dodaj prostą linię kodu. Plik będzie wyglądał następująco:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Teraz otwórz plik „app.component.ts” i dodaj deklarację zmiennej jquery i kod dla znacznika „p”. Należy również użyć haka cyklu życia ngAfterViewInit (). Po wprowadzeniu zmian plik będzie wyglądał następująco:

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

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

Teraz uruchom aplikację angular 2 za pomocą polecenia „ng służyć” i przetestuj ją. To powinno działać.


3
MOIM ZDANIEM. To najlepsze podejście, którego wciąż używam altana do zależności po stronie klienta.
Fırat KÜÇÜK

$("p").click(function(){ $(this).hide(); });” Najlepszym przykładem kiedy nie używać jQuery w kątowym ?!
Martin Schneider,

3
Czy nie jest łatwiej skonfigurować tylko przy użyciu npm? npm install jquery --save, a "scripts":["../node_modules/jquery/dist/jquery.js"]następnie import $ from 'jquery';w plikach * .ts. Jaka jest zaleta korzystania z altany?
cs_pupil

1
@cs_pupil Możesz także używać npm, ale Bower jest przeznaczony do zarządzania tylko pakietami front-end. Sprawdź odnośnik stackoverflow.com/questions/18641899/…
AmanDeepSharma

1
@AmanDeepSharma, dzięki! Co dziwne, wygląda na to, że altana jest przestarzała. npm install bowerprzyniósł: npm WARN deprecated bower@1.8.0:( stackoverflow.com/a/31219726/3806701 )
cs_pupil

13

Możesz zaimplementować hak cyklu życia ngAfterViewInit (), aby dodać niektóre manipulacje DOM

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Zachowaj ostrożność podczas korzystania z routera, ponieważ angular2 może przetwarzać widoki .. więc musisz mieć pewność, że manipulacje elementami DOM są wykonywane tylko przy pierwszym wywołaniu afterViewInit .. (Możesz użyć do tego statycznych zmiennych boolowskich)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

3
Property 'domElement' does not exist on type ElementRef
villasv

12

Robię to w prostszy sposób - najpierw zainstaluj jquery przez npm w konsoli: npm install jquery -Sa potem w pliku komponentu po prostu piszę: let $ = require('.../jquery.min.js')i działa! Oto pełny przykład z mojego kodu:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

W teplate mam na przykład:

<div class="departments-connections-graph">something...</div>

EDYTOWAĆ

Alternatywnie zamiast używać:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

posługiwać się

declare var $: any;

i w pliku index.html wpisz:

<script src="assets/js/jquery-2.1.1.js"></script>

Spowoduje to zainicjowanie jquery tylko raz globalnie - jest to ważne na przykład w przypadku używania modalnych okien w bootstrapie ...


nie wiem, nigdy nie używam angular-cli, ale używam angular2-webpack-starter i to działa.
Kamil Kiełczewski,

skąd pochodzi ta metoda?
omeralper


1
Masz literówkę => console.log({ conatiner : this.container});napraw toconsole.log({ container: this.container});
eric.dummy

11

krok 1: użyj polecenia: npm install jquery --save

krok 2: możesz po prostu zaimportować kątowy jako:

importuj $ z 'jquery';

to wszystko .

Przykładem może być:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

Moduł ..node_modules / @ types / jquery / index "'nie ma domyślnego eksportu
Dmitry Grinko

10

// instalacja jquerynpm install jquery --save

// instalacja definicji typu dla jquerytypings install dt~jquery --global --save

// dodanie biblioteki jquery do pliku konfiguracyjnego kompilacji, jak określono (w pliku „angular-cli-build.js”)

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// uruchom kompilację, aby dodać bibliotekę jquery do kompilacji ng build

// dodanie konfiguracji ścieżki względnej (w pliku system-config.js) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// zaimportuj bibliotekę jquery do pliku komponentu

import 'jquery';

poniżej znajduje się fragment kodu mojego przykładowego komponentu

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Niesamowite, działa idealnie dla projektów ng-cli .. Dzięki!
Chanakya Vadla

Super zręczny! Używam Angular-cli do mojego projektu i to jest złoto! Rock on
Logan H

Nie mam pliku „angular-cli-build.js”: /
Gonzalo,

10

Jeśli używasz angular-cli, możesz:

  1. Zainstaluj zależność :

    npm install jquery --save

    npm install @ types / jquery --save-dev

  2. Zaimportuj plik :

    Dodaj „../node_modules/jquery/dist/jquery.min.js” do sekcji „skrypt” w pliku .angular-cli.json

  3. Deklaracja jquery :

    Dodaj „$” do sekcji „typy” pliku tsconfig.app.json

Możesz znaleźć więcej informacji na temat oficjalnego kątowego dokumentu doc


1
Powoduje to następujący błąd podczas budowania: BŁĄD w błędzie TS2688: Nie można znaleźć pliku definicji typu dla „$”.
przedstawienie

błąd TS1192: Moduł „jquery” nie ma domyślnego eksportu
Dmitry Grinko

8

Aby użyć Jquery w Angular2 (4)

Postępuj zgodnie z tymi ustawieniami

zainstaluj definicję typu Jquery i Juqry

Do instalacji Jquery npm install jquery --save

Dla instalacji określania typu Jquery npm install @types/jquery --save-dev

a następnie po prostu zaimportuj jquery

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

1
dup odpowiedzi Akash !?
Martin Schneider,

7

Korzystanie z Angular Cli

 npm install jquery --save

W angular.json pod tablicą skryptów

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Teraz, aby użyć jQuery, wystarczy zaimportować go w następujący sposób do dowolnego komponentu, którego chcesz użyć jQuery.

Na przykład importowanie i używanie jQuery w komponencie głównym

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

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


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

ścieżka jest niepoprawna użycie./node_modules zamiast ../node_modules
Vikas Kandari

4

Ponieważ jestem osłem, pomyślałem, że dobrze byłoby mieć działający kod.

Również wersja Angular-kątomierz w typach Angular2 ma problemy z jQuery$ , więc najczęściej akceptowana odpowiedź nie daje mi czystej kompilacji.

Oto kroki, które muszę wykonać:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

Wewnątrz my.component.ts

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

4

Tylko napisz

declare var $:any;

po wszystkich sekcjach importowania możesz użyć jQuery i dołączyć bibliotekę jQuery do strony index.html

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

zadziałało dla mnie


2


1) Aby uzyskać dostęp do DOM w komponencie.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

Możesz dołączyć jQuery w następujący sposób. 2) Dołącz plik jquery do index.html przed załadowaniem angular2

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

Możesz użyć Jquery w następujący sposób, tutaj używam selektora dat JQuery Ui.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

To praca dla mnie.


2

Pomijam instalację jquery, ponieważ wspomniano o tym we wszystkich postach utworzonych przed moim. Więc już zainstalowałeś jquery. Importowanie t do swojego komponentu w ten sposób

import * as $ from 'jquery';

będzie działać, ale istnieje inny „kątowy” sposób, aby to zrobić, tworząc usługę.

Krok nr 1: utwórz plik jquery.service.ts .

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

Krok. Nie. 2: zarejestruj usługę w app.module.ts

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

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

Krok nr 3: wstrzyknij usługę do swojego komponentu my-super-duper.component.ts

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

Będę bardzo wdzięczny za wyjaśnienie zalet i wad obu metod: DI jquery jako usługa vs. import * as $ from 'jquery';


1

Najbardziej skutecznym sposobem, jaki znalazłem, jest użycie setTimeout z czasem 0 wewnątrz konstruktora strony / komponentu. To uruchommy jQuery w następnym cyklu wykonania po zakończeniu ładowania Angulara przez wszystkie komponenty potomne. Można użyć kilku innych metod składowych, ale wszystko, co próbowałem, działa najlepiej, gdy uruchamiam się w setTimeout.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

3
Zdecydowanie powinieneś użyć ngOnInit()zamiast tego
xordon

1
ngAfterViewInit ()
Niyaz

setTimeouttak naprawdę nie działa właściwie, jeśli masz wiele elementów *ngFordo wykończenia.
claudchan

1

Oto, co zadziałało dla mnie - Angular 2 z webpackiem

Próbowałem zadeklarować $jako typ, anyale ilekroć próbowałem użyć dowolnego modułu JQuery, który dostawałem (na przykład)$(..).datepicker() nie jest funkcją

Ponieważ mam plik Jquery zawarty w moim pliku vendor.ts, po prostu zaimportowałem go do mojego komponentu za pomocą

import * as $ from 'jquery';

Jestem teraz w stanie używać wtyczek Jquery (takich jak bootstrap-datetimepicker)


Pamiętaj, że uruchomienie aplikacji potrwa 5 razy dłużej.
jake

@jake jest to spowodowane czasem ładowania bibliotek bootstrap?
raghav710

Nie, jquery trwa dłużej. bootstrap! == twitter bootstrap
jake

@jake oops! Chyba chodziło mi o jquery. Dzięki za notatkę
raghav710

@jake, czy mógłbyś wyjaśnić, dlaczego uruchomienie aplikacji zajmuje 5 razy dłużej, udostępniając jquery dla całej aplikacji
Marvel Moe

1

Możesz także spróbować zaimportować go za pomocą „InjectionToken”. Jak opisano tutaj: Użyj jQuery w Angular / Typescript bez definicji typu

Możesz po prostu wstrzyknąć globalną instancję jQuery i użyć jej. W tym celu nie będziesz potrzebować żadnych definicji typów ani typów.

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

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

Po prawidłowym ustawieniu w pliku app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Możesz zacząć używać go w swoich komponentach:

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

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

1

Instalacja globalnej biblioteki jako oficjalna dokumentacja tutaj

  1. Zainstaluj z npm:

    npm install jquery --save

  2. Dodaj potrzebne pliki skryptów do skryptów:

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

Zrestartuj serwer, jeśli go uruchomisz i powinien on działać w Twojej aplikacji.


Jeśli chcesz korzystać z jednego komponentu, użyj go import $ from 'jquery';w swoim komponencie


1

Inni już opublikowali. ale podam tutaj prosty przykład, który może pomóc niektórym nowym użytkownikom.

Krok 1: W twoim pliku index.html jquery cdn odwołanie do pliku

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

Krok 2: Załóżmy, że chcemy pokazać div lub ukryć div po kliknięciu przycisku:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Krok 3: W pliku komponentu poniżej import deklaruje $ jako poniżej:

declare var $: any;

niż utworzyć funkcję jak poniżej:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Będzie działał z najnowszymi wersjami Angular i JQuery


0

Najpierw zainstaluj jQuery przy użyciu npm w następujący sposób:

npm install jquery  save

Po drugie, przejdź do pliku ./angular-cli.json w katalogu głównym folderu projektu Angular CLI i znajdź właściwość scripts: [] i dołącz ścieżkę do jQuery w następujący sposób:

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

Teraz, aby użyć jQuery, wystarczy zaimportować go do dowolnego komponentu, którego chcesz użyć jQuery.

import * as $ from 'jquery';
(or)
declare var $: any;

Spójrz na poniższy kod, który używa jQuery do animowania div po kliknięciu, szczególnie w drugim wierszu. Importujemy wszystko jako $ z jQuery.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

-1

Zainstaluj jquery

Terminal $ npm install jquery

(Dla bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Następnie dodaj importinstrukcję do app.module.ts.

import 'jquery'

(Dla bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Teraz nie będziesz już potrzebować <SCRIPT>tagów do odwoływania się do JavaScript.

(Do każdego CSS, którego chcesz użyć, nadal trzeba się odwoływać styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

-1

Kiedy używasz Angulara, staraj się nie używać biblioteki jquery. Spróbuj użyć funkcji i bibliotek utworzonych dla frameworka kątowego. Jeśli chcesz użyć funkcji jquery, takich jak find () , html () , closest () itp., Sugeruję użycie czystego js. przykład: querySelector () , innerHTML , parentElement i etc ...

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.