Bagaimana cara menggunakan jQuery dengan Angular?

Adakah yang bisa memberitahu saya, bagaimana cara menggunakan jQuery dengan Angular ?

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

Saya menyadari ada solusi seperti memanipulasi kelas atau id elemen DOM di muka, tapi saya berharap cara yang lebih bersih untuk melakukannya.

Menggunakan jQuery dari Angular2 sangat mudah dibandingkan dengan ng1. Jika Anda menggunakan TypeScript, pertama-tama Anda bisa merujuk definisi naskah jQuery.

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

TypescriptDefinitions tidak diperlukan karena Anda bisa menggunakan anysebagai tipe untuk $ataujQuery

Di komponen sudut Anda, Anda harus mereferensikan elemen DOM dari templat menggunakan @ViewChild()Setelah tampilan diinisialisasi Anda dapat menggunakan nativeElementproperti objek ini dan meneruskan ke jQuery.

Mendeklarasikan $(atau jQuery) sebagai JQueryStatic akan memberi Anda referensi yang diketik ke 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);

Contoh ini tersedia di plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint akan mengeluh tentang chosentidak menjadi properti di $, untuk memperbaikinya Anda dapat menambahkan definisi ke antarmuka JQuery di file * .d.ts kustom Anda

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

Mengapa semua orang menjadikannya ilmu roket? Untuk siapa pun yang perlu melakukan beberapa hal dasar pada elemen statis, misalnya, bodytag, lakukan saja ini:

1. Di index.html tambahkan scripttag dengan path ke lib jquery Anda, tidak masalah di mana (dengan cara ini Anda juga dapat menggunakan tag kondisional IE untuk memuat versi jquery yang lebih rendah untuk IE9 dan lebih sedikit).
2. Di export componentblok Anda memiliki fungsi yang memanggil kode Anda: $("body").addClass("done");Normaly ini menyebabkan kesalahan deklarasi, jadi setelah semua impor dalam file .ts ini, tambahkan declare var $:any;dan Anda baik-baik saja!

Inilah yang bekerja untuk saya.

LANGKAH 1 - Hal pertama yang pertama

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

LANGKAH 2 - IMPOR

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

Akhir-akhir ini, saya menulis kode dengan ES6alih - alih typescriptdan saya dapat melakukannya importtanpa * as $di import statement. Seperti inilah tampilannya sekarang:

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

Semoga berhasil.

Sekarang menjadi sangat mudah, Anda dapat melakukannya hanya dengan mendeklarasikan variabel jQuery dengan tipe apa pun di dalam pengontrol Angular2.

declare var jQuery:any;

Tambahkan ini hanya setelah pernyataan impor dan sebelum dekorator komponen.

Untuk mengakses elemen apa pun dengan id X atau Kelas X, Anda hanya perlu melakukannya

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

Cara sederhana:

1. termasuk skrip

index.html

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

2. mendeklarasikan

my.component.ts

declare var $: any;

3. gunakan

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

Silakan ikuti langkah-langkah sederhana ini. Ini berhasil untuk saya. Mari kita mulai dengan aplikasi sudut 2 baru untuk menghindari kebingungan. Saya menggunakan cli Angular. Jadi, instal jika Anda belum memilikinya. https://cli.angular.io/

Langkah 1: Buat aplikasi demo sudut 2

ng new jquery-demo

Anda bisa menggunakan nama apa saja. Sekarang periksa apakah itu berfungsi dengan menjalankan di bawah cmd. (Sekarang, pastikan bahwa Anda menunjuk ke 'jquery-demo' jika tidak menggunakan perintah cd)

ng serve

Anda akan melihat "aplikasi bekerja!" di browser.

Langkah 2: Instal Bower (Pengelola paket untuk web)

Jalankan perintah ini di cli (pastikan Anda menunjuk ke 'jquery-demo' jika tidak menggunakan perintah cd):

npm i -g bower --save

Sekarang setelah instalasi bower berhasil, Buat file 'bower.json' dengan menggunakan perintah di bawah ini:

bower init

Ini akan meminta input, cukup tekan enter untuk semua jika Anda ingin nilai default dan pada akhirnya ketik "Ya" ketika akan bertanya "Terlihat bagus?"

Sekarang Anda dapat melihat file baru (bower.json) di folder "jquery-demo". Anda dapat menemukan lebih banyak info di https://bower.io/

Langkah 3: Instal jquery

Jalankan perintah ini

bower install jquery --save

Ini akan membuat folder baru (bower_components) yang akan berisi folder instalasi jquery. Sekarang Anda telah menginstal jquery di folder 'bower_components'.

Langkah 4: Tambahkan lokasi jquery di file 'angular-cli.json'

Buka file 'angular-cli.json' (ada di folder 'jquery-demo') dan tambahkan lokasi jquery di "skrip". Ini akan terlihat seperti ini:

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

Langkah 5: Tulis kode jquery sederhana untuk pengujian

Buka file 'app.component.html' dan tambahkan baris kode sederhana, File akan terlihat seperti ini:

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

Sekarang Buka file 'app.component.ts' dan tambahkan deklarasi variabel jquery dan kode untuk tag 'p'. Anda juga harus menggunakan kait siklus hidup ngAfterViewInit (). Setelah melakukan perubahan file akan terlihat seperti ini:

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

Sekarang jalankan aplikasi sudut 2 Anda dengan menggunakan perintah 'ng serve' dan mengujinya. Itu harus bekerja.

Anda dapat mengimplementasikan kait siklus hidup ngAfterViewInit () untuk menambahkan beberapa manipulasi DOM

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

Hati-hati saat menggunakan router karena angular2 dapat mendaur ulang tampilan .. jadi Anda harus yakin bahwa manipulasi elemen DOM hanya dilakukan pada panggilan pertama afterViewInit .. (Anda dapat menggunakan variabel boolean statis untuk melakukannya)

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

Saya melakukannya dengan cara yang lebih sederhana - instal jquery pertama kali oleh npm di konsol: npm install jquery -Sdan kemudian di file komponen, saya hanya menulis: let $ = require('.../jquery.min.js')dan itu berhasil! Berikut contoh lengkap dari beberapa kode saya:

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

Pada teplate saya punya misalnya:

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

EDIT

Atau alih-alih menggunakan:

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

menggunakan

declare var $: any;

dan di index.html Anda cantumkan:

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

Ini akan menginisialisasi jquery hanya sekali globaly - ini penting misalnya untuk menggunakan modal windows di bootstrap ...

langkah 1: gunakan perintah: npm install jquery --save

langkah 2: Anda cukup mengimpor sudut sebagai:

impor $ dari 'jquery';

itu saja .

Contohnya adalah:

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


}

// menginstal jquerynpm install jquery --save

// instal tipe defintion untuk jquerytypings install dt~jquery --global --save

// menambahkan perpustakaan jquery ke file konfigurasi build seperti yang ditentukan (dalam file "angular-cli-build.js")

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

// jalankan build untuk menambahkan perpustakaan jquery di build ng build

// menambahkan konfigurasi jalur relatif (dalam sistem-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'}};

// impor perpustakaan jquery di file komponen Anda

import 'jquery';

di bawah ini adalah cuplikan kode dari komponen sampel saya

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

Jika Anda menggunakan angular-cli yang dapat Anda lakukan:

1. Instal ketergantungan :

   npm instal jquery --save

   npm instal @ types / jquery --save-dev

2. Impor file :

   Tambahkan "../node_modules/jquery/dist/jquery.min.js" ke bagian "script" di file .angular-cli.json

3. Nyatakan jquery :

   Tambahkan "$" ke bagian "types" dari tsconfig.app.json

Anda dapat menemukan rincian lebih lanjut tentang dokumen klinis sudut resmi

Untuk Menggunakan Jquery di Angular2 (4)

Ikuti setps ini

instal definisi tipe Jquery dan Juqry

Untuk Instalasi Jquery npm install jquery --save

Untuk Instalasi defination Jenis Jquery npm install @types/jquery --save-dev

dan kemudian cukup mengimpor 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 
}

Menggunakan Angular Cli

 npm install jquery --save

Di angular.json di bawah susunan skrip

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

Sekarang untuk menggunakan jQuery, yang harus Anda lakukan adalah mengimpornya sebagai berikut dalam komponen apa pun yang ingin Anda gunakan jQuery.

Misalnya mengimpor dan menggunakan jQuery di komponen root

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

Karena saya bodoh, saya pikir akan lebih baik memiliki beberapa kode yang berfungsi.

Juga, versi Angular2 mengetik sudut-busur derajat memiliki masalah dengan jQuery $ , jadi jawaban yang diterima teratas tidak memberi saya kompilasi bersih.

Berikut langkah-langkah yang harus saya lakukan:

index.html

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

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

    }
}

Cukup tulis

declare var $:any;

setelah semua bagian impor, Anda dapat menggunakan jQuery dan memasukkan perpustakaan jQuery di halaman index.html Anda

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

itu berhasil untuk saya

1) Untuk mengakses komponen DOM.

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

Anda dapat memasukkan jQuery dengan cara berikut. 2) Sertakan file jquery Anda di index.html sebelum angular2 dimuat

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

Anda dapat menggunakan Jquery dengan cara berikut, Ini saya menggunakan pemilih tanggal 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
         }
        });
    }
}

Ini bekerja untuk saya.

Saya melewatkan instalasi jquery karena titik ini telah disebutkan di semua pos yang dibuat sebelum tambang. Jadi, Anda sudah menginstal jquery. Mengimpor t ke komponen Anda seperti ini

import * as $ from 'jquery';

akan bekerja, tetapi ada cara lain 'sudut' untuk melakukan ini dengan membuat layanan.

Langkah no. 1: buat file 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');

Langkah. tidak. 2: daftarkan layanan di app.module.ts

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

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

Langkah no. 3: menyuntikkan layanan ke komponen saya-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');
    }
}

Saya akan sangat berterima kasih jika seseorang dapat menjelaskan pro dan kontra dari kedua metode: DI jquery sebagai layanan vs impor * sebagai $ dari 'jquery';

Cara paling efektif yang saya temukan adalah menggunakan setTimeout dengan waktu 0 di dalam halaman / komponen konstruktor. Ini memungkinkan jQuery berjalan dalam siklus eksekusi berikutnya setelah Angular selesai memuat semua komponen anak. Beberapa metode komponen lain dapat digunakan tetapi semua yang saya coba bekerja dengan baik ketika dijalankan di dalam setTimeout.

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

Inilah yang bekerja untuk saya - Angular 2 dengan webpack

Saya mencoba mendeklarasikan $sebagai tipe anytetapi setiap kali saya mencoba menggunakan modul JQuery apa pun yang saya peroleh (misalnya)$(..).datepicker() bukan fungsi

Karena saya memiliki Jquery yang disertakan dalam file vendor.ts saya, saya hanya mengimpornya ke komponen saya menggunakan

import * as $ from 'jquery';

Saya dapat menggunakan plugin Jquery (seperti bootstrap-datetimepicker) sekarang

Anda juga dapat mencoba mengimpornya dengan "InjectionToken". Seperti yang dijelaskan di sini: Gunakan jQuery di Angular / Typescript tanpa definisi tipe

Anda cukup menyuntikkan instance global jQuery dan menggunakannya. Untuk ini, Anda tidak akan memerlukan definisi atau pengetikan tipe apa pun.

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

Ketika diatur dengan benar di app.module.ts Anda:

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

Anda dapat mulai menggunakannya di komponen Anda:

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

Instalasi Perpustakaan Global sebagai dokumentasi resmi di sini

1. Pasang dari npm:

   npm install jquery --save

2. Tambahkan file skrip yang diperlukan ke skrip:

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

Mulai ulang server jika Anda menjalankannya, dan itu seharusnya berfungsi pada aplikasi Anda.

Jika Anda ingin menggunakan di dalam satu komponen, gunakan import $ from 'jquery';di dalam komponen Anda

Yang lain sudah diposting. tetapi saya memberikan contoh sederhana di sini sehingga dapat membantu beberapa pendatang baru.

Langkah-1: Di cd. jquery referensi file index.html Anda

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

Langkah-2: asumsikan kita ingin menampilkan div atau menyembunyikan div saat mengklik tombol:

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

Langkah-3: Di file komponen di bawah impor menyatakan $ sebagai di bawah:

declare var $: any;

daripada membuat fungsi seperti di bawah ini:

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

Ini akan bekerja dengan Angular dan JQuery terbaru

Pertama, instal jQuery menggunakan npm sebagai berikut:

npm install jquery — save

Kedua, buka file ./angular-cli.json di root folder proyek Angular CLI Anda, dan temukan skrip: [] properti, dan sertakan path ke jQuery sebagai berikut:

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

Sekarang, untuk menggunakan jQuery, yang harus Anda lakukan adalah mengimpornya dalam komponen apa pun yang Anda ingin gunakan jQuery.

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

Lihatlah kode di bawah ini yang menggunakan jQuery untuk menghidupkan div saat klik, terutama di baris kedua. Kami mengimpor semuanya sebagai $ dari 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");
        });
    });
  }
}

Instal jquery

Terminal $ npm install jquery

(Untuk bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Kemudian tambahkan importpernyataan ke app.module.ts.

import 'jquery'

(Untuk bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Sekarang Anda tidak lagi memerlukan <SCRIPT>tag untuk referensi JavaScript.

(CSS apa pun yang ingin Anda gunakan masih harus dirujuk styles.css)

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

Saat Anda menggunakan Angular, cobalah untuk tidak menggunakan perpustakaan jquery. Coba gunakan fitur dan pustaka yang diproduksi untuk kerangka sudut. Jika Anda ingin menggunakan fungsi jquery seperti find () , html () , terdekat () dan lain-lain, saya sarankan menggunakan js murni. contoh: querySelector () , innerHTML , parentElement dan lain-lain ...