Jak korzystać z jQuery z Angular?

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.

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;
}    

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!

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.

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

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

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

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;
        }
    }
}

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

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


}

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

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

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 
}

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

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);

    }
}

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

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.

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';

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

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)

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

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

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

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");
        });
    });
  }
}

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";

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