Jak używać jQuery z Angular?

Dlaczego wszyscy robią z tego rakietę? Dla każdego, kto potrzebuje zrobić kilka podstawowych rzeczy na elementach statycznych, na przykład znacznik body, po prostu zrób to:

1. w indeksie.html Dodaj znacznik script ze ścieżką do biblioteki jQuery, nie ma znaczenia gdzie (w ten sposób możesz również użyć tagów warunkowych IE do załadowania niższej wersji jquery dla IE9 i less).
2. w twoim export component bloku masz funkcję, która woła Twój kod: $("body").addClass("done"); normalnie powoduje to błąd deklaracji, więc po wszystkich importach w to .plik ts, dodaj declare var $:any; i gotowe!

To mi się udało.

Krok 1-Najpierw rzeczy pierwsze

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

#UPDATE - Feb - 2017

Ostatnio piszę kod z ES6 zamiast typescript i jestem w stanie import Bez * as $ w import statement. Tak to teraz wygląda:

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

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

declare var jQuery:any;

Dodaj to zaraz po poleceniach import i przed dekoratorem komponentu.

Aby uzyskać dostęp do dowolnego elementu o id X lub klasie X wystarczy wykonać

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

Wykonaj te proste kroki. U mnie zadziałało. Pozwala zacząć od nowej aplikacji angular 2, aby uniknąć nieporozumień. Używam Angular cli. Zainstaluj go, jeśli jeszcze go nie masz. https://cli.angular.io/

Krok 1: Utwórz aplikację angular 2 demo

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!"on przeglądarka.

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

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

npm i -g bower --save

Teraz po pomyślnej instalacji altany, Utwórz ' altanę.plik json ' używając poniższego polecenia:

bower init

Zapyta o Dane wejściowe, po prostu naciśnij enter dla wszystkich, jeśli chcesz wartości domyślne i na końcu wpisz "Tak", gdy zapyta " wygląda dobrze?"

Teraz możesz zobaczyć nowy plik (biał.json) w folderze "jquery-demo". Więcej informacji znajdziesz na stronie https://bower.io/

Krok 3: Zainstaluj jquery

Uruchom to polecenie

bower install jquery --save

Utworzy nowy folder (bower_components), który będzie zawierał folder instalacyjny jquery. Teraz masz zainstalowany jquery w folderze 'bower_components'.

Krok 4: Dodaj lokalizację jquery w ' angular-cli.plik json

Open ' angular-cli.plik json( obecny w'jQuery-demo' folder) i dodać lokalizację jquery w "skryptach". Będzie to wyglądało tak:

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

Krok 5: napisz prosty kod jquery do testowania

Otwórz aplikację.komponent.plik html i dodaj prostą linię kodu, plik będzie wyglądał tak:

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

Teraz otwórz aplikację.komponent.plik ts i dodać deklarację zmiennej jquery oraz kod dla tagu 'p'. Należy również użyć lifecycle Hook 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 swój aplikacja angular 2 za pomocą polecenia 'ng serve' i przetestuj ją. Powinno zadziałać.

Prosty sposób:

1. include script

Indeks.html

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

2. declare

declare var $: any;

3. użyj

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

Możesz zaimplementować hook 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;
            });
}

Bądź ostrożny podczas korzystania z routera, ponieważ angular2 może przetwarzać widoki .. więc musisz mieć pewność, że manipulacje elementami DOM są wykonywane tylko w pierwszym wywołaniu aftervievinit .. ( W tym celu możesz użyć statycznych zmiennych logicznych)

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 instaluję jquery przez npm w konsoli: npm install jquery -S a potem w pliku składowym 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>

EDIT

Alternatywnie zamiast używać:

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

Użyj

declare var $: any;

I w Twoim indeksie.HTML put:

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

To zainicjalizuje jquery tylko raz - jest to ważne na przykład w przypadku użycia okien modalnych w bootstrap...

//instalowanie jquery npm install jquery --save

//Instalacja definicji typu dla jquery typings install dt~jquery --global --save

//dodanie biblioteki jquery do pliku konfiguracyjnego build, jak określono (w "angular-CLI-build.js " plik)

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

//Uruchom kompilację, aby dodać bibliotekę jquery w kompilacji ng build

/ / dodanie konfiguracji ścieżki względnej (w 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'}};

//Importuj bibliotekę jquery do pliku składowego

import 'jquery';

Poniżej fragment kodu mojej próbki komponent

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 zrobić:

1. Zainstaluj zależność :

   Npm install jquery --save

   Npm install @types / jquery --save-dev

2. Import pliku :

   Dodaj "../ node_modules / jquery/dist / jquery./ min.js "do sekcji" skrypt " w .angular-cli.plik json

3. Declare jquery :

   Dodaj " $ "do sekcji" Typy " tsconfig.app.json

Znajdziesz więcej szczegółów na official angular cli doc

Krok 1: Użyj polecenia: npm install jquery --save

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

Import $ z 'jquery';

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


}

Aby użyć Jquery w Angular2 (4)

Follow these setps

Zainstaluj definację typu Jquery i Juqry

Do Instalacji Jquery npm install jquery --save

Do instalacji definacji 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 
}

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

Również, Angular2 typowanie wersja kątowy kątomierz ma problemy z jQuery $, więc top zaakceptowana odpowiedź nie daje mi czystą kompilację.

Oto kroki, które muszę wykonać:

Indeks.html

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

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

    }
}

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 indeksu.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żywać Jquery w następujący sposób, tutaj używam jQuery UI date picker.

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

Pomijam instalację jquery, ponieważ ten punkt został wymieniony we wszystkich postach utworzonych przed moim. Tak więc, masz już zainstalowany jquery. Importowanie t do 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 jquery.obsługa.plik ts .

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

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

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

Krok nr 3: wstrzyknięcie usługi do twojego komponentu my-super-duper.komponent.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, jeśli ktoś wyjaśni wady i zalety obu metod: DI jquery jako usługa vs. import * jako $ z 'jquery';

Po prostu napisz

declare var $:any;

Po zaimportowaniu wszystkich sekcji możesz użyć jQuery i dołączyć bibliotekę jQuery do indeksu.strona html

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

Zadziałało dla mnie

Najskuteczniejszym sposobem, jaki znalazłem, jest użycie setTimeout z czasem 0 wewnątrz konstruktora strony / komponentu. Pozwala to na uruchomienie jQuery w następnym cyklu wykonywania po zakończeniu ładowania wszystkich komponentów potomnych przez Angular. Można użyć kilku innych metod komponentowych, ale wszystkie, które próbowałem, działają najlepiej, gdy uruchamiam się wewnątrz setTimeout.

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

Oto co mi się udało-Angular 2 z webpack

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

Ponieważ mam Jquery zawarte w moim dostawcy.plik ts po prostu zaimportowałem go do mojego komponentu używając

import * as $ from 'jquery';

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

Możesz również 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. Do tego nie będziesz potrzebował żadnych definicji typu ani typowań.

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 aplikacji.moduł.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();
    }
}

Install jquery

Terminal$ npm install jquery

(dla bootstrap 4...)

Terminal$ npm install popper.js

Terminal$ npm install bootstrap

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

import 'jquery'

(dla bootstrap 4...)

import 'popper.js'
import 'bootstrap'

Teraz nie będziesz już potrzebował znaczników <SCRIPT>, aby odwoływać się do JavaScript.

(każdy CSS, którego chcesz użyć, musi być odwołany w styles.css)

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

Globalna instalacja 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" ],

Uruchom ponownie serwer, jeśli go używasz i powinien działać na Twojej aplikacji.

Jeśli chcesz użyć wewnątrz pojedynczego komponentu użyj import $ from 'jquery'; inside your component