วิธีการใช้ jQuery กับ Angular

ใครช่วยบอกฉันได้ว่าจะใช้jQueryกับAngular ได้อย่างไร

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

ฉันรู้ว่ามีวิธีแก้ปัญหาเช่นการจัดการชั้นเรียนหรือรหัสขององค์ประกอบ DOM ล่วงหน้า แต่ฉันหวังว่าวิธีที่สะอาดกว่าในการทำมัน

การใช้ jQuery จาก Angular2 นั้นง่ายกว่าเมื่อเปรียบเทียบกับ ng1 หากคุณใช้ TypeScript คุณสามารถอ้างอิงนิยามของ jQuery typescript ก่อนได้

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

typescriptDefinitions ไม่จำเป็นเนื่องจากคุณสามารถใช้anyเป็นประเภทได้$หรือjQuery

ในองค์ประกอบเชิงมุมของคุณคุณควรอ้างอิงองค์ประกอบ DOM จากเทมเพลตโดยใช้@ViewChild()หลังจากที่มุมมองเริ่มต้นแล้วคุณสามารถใช้nativeElementคุณสมบัติของวัตถุนี้และส่งผ่านไปยัง jQuery

การประกาศ$(หรือjQuery) เป็น JQueryStatic จะทำให้คุณมีการอ้างอิงถึง 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);

ตัวอย่างนี้มีให้บริการบนตัวรวบรวมเสียง: http://plnkr.co/edit/Nq9LnK?p=preview

tslint จะบ่นchosenว่าไม่ได้เป็นสถานที่ให้บริการใน $ เพื่อแก้ไขปัญหานี้คุณสามารถเพิ่มคำนิยามให้กับส่วนต่อประสาน JQuery ในไฟล์ * .d.ts ที่กำหนดเองของคุณ

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

ทำไมทุกคนถึงทำให้วิทยาศาสตร์เป็นจรวด? สำหรับคนอื่น ๆ ที่ต้องการทำสิ่งพื้นฐานบางอย่างในองค์ประกอบแบบคงที่เช่นbodyแท็กให้ทำดังนี้

1. ใน index.html เพิ่ม scriptแท็กที่มีพา ธ ไปยัง jquery lib ของคุณไม่สำคัญว่า (ด้วยวิธีนี้คุณสามารถใช้แท็กตามเงื่อนไข IE เพื่อโหลด jquery รุ่นที่ต่ำกว่าสำหรับ IE9 และรุ่นที่ต่ำกว่า)
2. ในexport componentบล็อกของคุณมีฟังก์ชั่นที่เรียกใช้รหัสของคุณ: $("body").addClass("done");Normaly ทำให้เกิดข้อผิดพลาดในการประกาศดังนั้นหลังจากการนำเข้าทั้งหมดในไฟล์. tts นี้ให้เพิ่มdeclare var $:any;แล้วคุณก็พร้อมที่จะไป!

นี่คือสิ่งที่ได้ผลสำหรับฉัน

ขั้นตอนที่ 1 - สิ่งแรกสิ่งแรก

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

ขั้นตอนที่ 2 - นำเข้า

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

เมื่อเร็ว ๆ นี้ผมเขียนโค้ดES6แทนtypescriptและฉันสามารถimportโดยไม่ต้องใน* as $ import statementนี่คือสิ่งที่ดูเหมือนตอนนี้:

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

โชคดี.

ตอนนี้มันกลายเป็นเรื่องง่ายมากคุณสามารถทำได้โดยการประกาศตัวแปร jQuery กับประเภทใด ๆ ภายใน Angular2 controller

declare var jQuery:any;

เพิ่มสิ่งนี้หลังจากนำเข้าคำสั่งและก่อนที่จะตกแต่งส่วนประกอบ

ในการเข้าถึงองค์ประกอบใด ๆ ด้วย id X หรือ Class X คุณต้องทำ

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

วิธีง่ายๆ:

1. รวมสคริปต์

index.html

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

2. ประกาศ

my.component.ts

declare var $: any;

3. การใช้งาน

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

โปรดทำตามขั้นตอนง่าย ๆ เหล่านี้ มันใช้งานได้สำหรับฉัน เริ่มต้นด้วยแอปมุม 2 ใหม่เพื่อหลีกเลี่ยงความสับสน ฉันกำลังใช้ Angular cli ดังนั้นให้ติดตั้งหากคุณยังไม่มี https://cli.angular.io/

ขั้นตอนที่ 1: สร้างแอปสาธิตเชิงมุม 2

ng new jquery-demo

คุณสามารถใช้ชื่อใด ๆ ตอนนี้ตรวจสอบว่ามันทำงานโดยใช้ด้านล่าง cmd (ตอนนี้ตรวจสอบให้แน่ใจว่าคุณกำลังชี้ไปที่ 'jquery-demo' หากไม่ได้ใช้คำสั่ง cd)

ng serve

คุณจะเห็น "แอพใช้งานได้!" บนเบราว์เซอร์

ขั้นตอนที่ 2: ติดตั้ง Bower (ตัวจัดการแพ็คเกจสำหรับเว็บ)

เรียกใช้คำสั่งนี้บน cli (ตรวจสอบให้แน่ใจว่าคุณชี้ไปที่ 'jquery-demo' หากไม่ได้ใช้คำสั่ง cd):

npm i -g bower --save

หลังจากติดตั้ง bower สำเร็จให้สร้างไฟล์ 'bower.json' โดยใช้คำสั่งด้านล่าง:

bower init

มันจะถามหาอินพุตเพียงกด Enter สำหรับทุกคนถ้าคุณต้องการค่าเริ่มต้นและที่ประเภทท้าย "ใช่" เมื่อมันจะถามว่า "ดูดี?"

ตอนนี้คุณสามารถดูไฟล์ใหม่ (bower.json) ในโฟลเดอร์ "jquery-demo" คุณสามารถหาข้อมูลเพิ่มเติมได้ที่https://bower.io/

ขั้นตอนที่ 3: ติดตั้ง jquery

เรียกใช้คำสั่งนี้

bower install jquery --save

มันจะสร้างโฟลเดอร์ใหม่ (bower_components) ซึ่งจะมีโฟลเดอร์การติดตั้ง jquery ตอนนี้คุณได้ติดตั้ง jquery ในโฟลเดอร์ 'bower_components' แล้ว

ขั้นตอนที่ 4: เพิ่มตำแหน่ง jquery ในไฟล์ 'angular-cli.json'

เปิดไฟล์ 'angular-cli.json' (อยู่ในโฟลเดอร์ 'jquery-demo') และเพิ่มตำแหน่ง jquery ใน "สคริปต์" มันจะมีลักษณะเช่นนี้:

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

ขั้นตอนที่ 5: เขียนรหัส jquery อย่างง่ายสำหรับการทดสอบ

เปิดไฟล์ 'app.component.html' และเพิ่มบรรทัดโค้ดอย่างง่ายไฟล์จะมีลักษณะดังนี้:

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

ตอนนี้เปิดไฟล์ 'app.component.ts' และเพิ่มการประกาศตัวแปร jquery และรหัสสำหรับแท็ก 'p' คุณควรใช้ lifecycle hook ngAfterViewInit () ด้วย หลังจากทำการเปลี่ยนแปลงไฟล์จะมีลักษณะดังนี้:

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

ตอนนี้เรียกใช้แอปเชิงมุม 2 ของคุณโดยใช้คำสั่ง 'ng บริการ' และทดสอบ มันควรจะทำงาน

คุณสามารถใช้ lifecycle hook ngAfterViewInit ()เพื่อเพิ่มการปรับแต่ง DOM บางอย่าง

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

ระวังเมื่อใช้เราเตอร์เพราะ angular2 อาจรีไซเคิลมุมมอง .. ดังนั้นคุณต้องแน่ใจว่าการปรับแต่งองค์ประกอบ DOM เสร็จสิ้นในการเรียก afterViewInit ครั้งแรกเท่านั้น (คุณสามารถใช้ตัวแปรบูลีนสแตติกเพื่อทำเช่นนั้น)

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

ฉันทำได้ง่ายๆ - ติดตั้ง jquery ก่อนโดย npm ใน console: npm install jquery -Sจากนั้นในไฟล์ component ฉันเพิ่งเขียน: let $ = require('.../jquery.min.js')และมันใช้งานได้! ตัวอย่างที่นี่จากรหัสของฉัน:

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

ใน teplate ฉันมีตัวอย่างเช่น:

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

แก้ไข

อีกทางเลือกหนึ่งแทนการใช้:

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

ใช้

declare var $: any;

และใน index.html ของคุณใส่:

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

สิ่งนี้จะเริ่มต้น jquery เพียงครั้งเดียว globaly - นี่เป็นสิ่งสำคัญเช่นสำหรับการใช้หน้าต่าง modal ใน bootstrap ...

ขั้นตอนที่ 1: ใช้คำสั่ง: npm install jquery --save

ขั้นตอนที่ 2: คุณสามารถนำเข้าเชิงมุมเป็น:

นำเข้า $ จาก 'jquery';

นั่นคือทั้งหมดที่

ตัวอย่างจะเป็น:

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


}

// การติดตั้ง jquerynpm install jquery --save

// การติดตั้งการกำหนดชนิดสำหรับ jquerytypings install dt~jquery --global --save

// เพิ่มไลบรารี jquery ลงในไฟล์กำหนดค่าบิลด์ตามที่ระบุ (ในไฟล์ "angular-cli-build.js")

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

// เรียกใช้บิลด์เพื่อเพิ่มไลบรารี jquery ในบิลด์ ng build

// การเพิ่มการกำหนดค่าเส้นทางสัมพัทธ์ (ใน 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'}};

// นำเข้า jquery library ในไฟล์คอมโพเนนต์ของคุณ

import 'jquery';

ด้านล่างคือโค้ด snipppet ขององค์ประกอบตัวอย่างของฉัน

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

หากคุณใช้ angi-cli คุณสามารถทำได้:

1. ติดตั้งการพึ่งพา :

   npm ติดตั้ง jquery - บันทึก

   npm install @ types / jquery --save-dev

2. นำเข้าไฟล์ :

   เพิ่ม "../node_modules/jquery/dist/jquery.min.js" ไปยังส่วน "script" ในไฟล์ .angular-cli.json

3. ประกาศ jquery :

   เพิ่ม "$" ไปยังส่วน "types" ของ tsconfig.app.json

คุณสามารถค้นหารายละเอียดเพิ่มเติมเกี่ยวกับdoc cli เชิงมุมอย่างเป็นทางการ

การใช้ Jquery ใน Angular2 (4)

ติดตาม setps เหล่านี้

ติดตั้งการกำหนดประเภท Jquery และ Juqry

สำหรับการติดตั้ง Jquery npm install jquery --save

สำหรับการติดตั้งการกำหนดประเภท Jquery npm install @types/jquery --save-dev

จากนั้นเพียงนำเข้า 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 
}

ใช้ Cli เชิงมุม

 npm install jquery --save

ใน angular.json ภายใต้สคริปต์อาร์เรย์

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

ตอนนี้การใช้ jQuery สิ่งที่คุณต้องทำคือการนำเข้าดังต่อไปนี้ในองค์ประกอบใด ๆ ที่คุณต้องการใช้ jQuery

ตัวอย่างเช่นการนำเข้าและการใช้ jQuery ในองค์ประกอบของราก

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

ตั้งแต่ฉันเป็นคนโง่ฉันคิดว่ามันจะเป็นการดีถ้ามีรหัสการทำงาน

นอกจากนี้ Angular -protractorเวอร์ชันการพิมพ์ของ Angular2 ยังมีปัญหากับ jQuery $ดังนั้นคำตอบที่ได้รับการยอมรับอันดับต้น ๆ ก็ไม่ได้รวบรวมคอมไพล์ให้ฉันเลย

นี่คือขั้นตอนที่ฉันต้องทำงาน:

index.html

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

ภายใน 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);

    }
}

แค่เขียน

declare var $:any;

หลังจากส่วนการนำเข้าทั้งหมดคุณสามารถใช้ jQuery และรวมไลบรารี jQuery ในหน้า index.html ของคุณ

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

มันใช้งานได้สำหรับฉัน

1) เข้าถึง 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"); 
 }

คุณสามารถรวม jQuery ด้วยวิธีต่อไปนี้ 2) รวมไฟล์ jquery ของคุณไว้ใน index.html ก่อนที่จะทำการโหลด 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>

คุณสามารถใช้ Jquery ด้วยวิธีต่อไปนี้ฉันใช้ตัวเลือกวันที่ของ 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
         }
        });
    }
}

งานนี้สำหรับฉัน

ฉันกำลังข้ามการติดตั้ง jquery เนื่องจากจุดนี้ถูกกล่าวถึงในโพสต์ทั้งหมดที่สร้างขึ้นก่อนหน้าฉัน ดังนั้นคุณได้ติดตั้ง jquery แล้ว นำเข้าเสื้อของคุณเช่นนี้

import * as $ from 'jquery';

จะทำงานได้ แต่มีอีกวิธีหนึ่ง 'เชิงมุม' ในการทำเช่นนี้โดยการสร้างบริการ

ขั้นตอนที่ 1: สร้างไฟล์ 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');

ขั้นตอน ไม่ 2: ลงทะเบียนบริการในapp.module.ts

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

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

ขั้นตอนที่ 3: ฉีดเซอร์วิสลงในคอมโพเนนต์ของคุณ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');
    }
}

ฉันจะขอบคุณมากถ้าใครสามารถอธิบายข้อดีข้อเสียของทั้งสองวิธี: DI jquery เป็นบริการเทียบกับการนำเข้า * เป็น $ จาก 'jquery';

วิธีที่มีประสิทธิภาพที่สุดที่ฉันได้พบคือใช้ setTimeout ด้วยเวลา 0 ภายในตัวสร้างหน้า / ส่วนประกอบ สิ่งนี้จะทำให้ jQuery ทำงานในรอบการดำเนินการถัดไปหลังจาก Angular เสร็จสิ้นการโหลดส่วนประกอบย่อยทั้งหมด สามารถใช้วิธีการอื่น ๆ ได้ แต่ฉันพยายามอย่างดีที่สุดเมื่อทำงานใน setTimeout

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

นี่คือสิ่งที่ใช้ได้กับฉัน - Angular 2 พร้อม webpack

ฉันพยายามประกาศ$เป็นประเภทanyแต่เมื่อใดก็ตามที่ฉันพยายามใช้โมดูล JQuery ใด ๆ ที่ฉันได้รับ (เช่น)$(..).datepicker()ก็ไม่ใช่ฟังก์ชั่น

ตั้งแต่ฉันมี Jquery รวมอยู่ในไฟล์ Vend.ts ของฉันฉันก็แค่นำเข้ามาที่ส่วนประกอบของฉันโดยใช้

import * as $ from 'jquery';

ฉันสามารถใช้ปลั๊กอิน Jquery (เช่น bootstrap-datetimepicker) ได้แล้วตอนนี้

คุณสามารถลองนำเข้ามันด้วย "InjectionToken" ตามที่อธิบายไว้ที่นี่: ใช้ jQuery ใน Angular / Typescript โดยไม่มีการกำหนดประเภท

คุณสามารถฉีดอินสแตนซ์โกลบอล jQuery และใช้งานได้ สำหรับสิ่งนี้คุณไม่จำเป็นต้องมีคำจำกัดความประเภทหรือการพิมพ์ใด ๆ

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

เมื่อตั้งค่าอย่างถูกต้องใน 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 { }

คุณสามารถเริ่มใช้มันในส่วนประกอบของคุณ:

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. ติดตั้งจาก npm:

   npm install jquery --save

2. เพิ่มไฟล์สคริปต์ที่จำเป็นให้กับสคริปต์:

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

รีสตาร์ทเซิร์ฟเวอร์หากคุณใช้งานและควรทำงานบนแอปของคุณ

หากคุณต้องการใช้ภายในองค์ประกอบเดียวให้ใช้import $ from 'jquery';ภายในองค์ประกอบของคุณ

คนอื่นโพสต์แล้ว แต่ฉันให้ตัวอย่างง่ายๆที่นี่เพื่อช่วยผู้มาใหม่

ขั้นตอนที่ 1: ในไฟล์ index.html ของคุณอ้างอิง jquery cdn

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

ขั้นตอนที่ 2: สมมติว่าเราต้องการแสดง div หรือซ่อน div เมื่อคลิกปุ่ม:

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

ขั้นตอนที่ 3: ในไฟล์คอมโพเนนต์ตะโกนนำเข้าประกาศ $ เป็นตะโกน:

declare var $: any;

กว่าสร้างฟังก์ชั่นเหมือนร้อง:

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

มันจะทำงานกับ Angular และ JQuery ล่าสุด

ก่อนอื่นให้ติดตั้ง jQuery โดยใช้ npm ดังนี้:

npm install jquery — save

ขั้นที่สองไปที่ไฟล์. / triangle-cli.json ที่รูทของโฟลเดอร์โครงการ Angular CLI ของคุณและค้นหาสคริปต์: [] คุณสมบัติและรวมถึงพา ธ ไปยัง jQuery ดังนี้:

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

ตอนนี้การใช้ jQuery สิ่งที่คุณต้องทำก็คือการนำเข้ามันในองค์ประกอบใด ๆ ก็ตามที่คุณต้องการใช้ jQuery

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

ดูโค้ดด้านล่างที่ใช้ jQuery เพื่อทำให้ div เคลื่อนไหวเมื่อคลิกโดยเฉพาะในบรรทัดที่สอง เรากำลังนำเข้าทุกอย่างเป็น $ จาก 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");
        });
    });
  }
}

ติดตั้ง jquery

$ ร์มินัล npm install jquery

(สำหรับ bootstrap 4 ... )

$ ร์มินัล npm install popper.js

$ ร์มินัล npm install bootstrap

แล้วเพิ่มคำสั่งให้importapp.module.ts

import 'jquery'

(สำหรับ bootstrap 4 ... )

import 'popper.js'
import 'bootstrap'

ตอนนี้คุณจะไม่ต้องใช้<SCRIPT>แท็กเพื่ออ้างอิง JavaScript อีกต่อไป

(CSS ใด ๆ ที่คุณต้องการใช้ยังคงต้องมีการอ้างอิงstyles.css)

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

เมื่อคุณใช้ Angular พยายามอย่าใช้ไลบรารี jquery ลองใช้ฟีเจอร์และไลบรารี่ที่สร้างขึ้นสำหรับกรอบเชิงมุม หากคุณต้องการใช้ฟังก์ชั่น jquery เช่นfind () , html () , ที่ใกล้ที่สุด ()และอื่น ๆ ฉันขอแนะนำให้ใช้ js บริสุทธิ์ ตัวอย่าง: querySelector () , innerHTML , parentElementและอื่น ๆ ...