Làm thế nào để sử dụng jQuery với Angular?

Ai đó có thể cho tôi biết, làm thế nào để sử dụng jQuery với Angular không?

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

Tôi biết có những cách giải quyết như thao túng lớp hoặc id của phần tử DOM trả trước, nhưng tôi hy vọng có cách làm sạch hơn.

Sử dụng jQuery từ Angular2 rất dễ so với ng1. Nếu bạn đang sử dụng TypeScript, trước tiên bạn có thể tham chiếu định nghĩa kiểu chữ jQuery.

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

anyKiểu mô tả Định nghĩa không bắt buộc vì bạn chỉ có thể sử dụng làm kiểu cho $hoặcjQuery

Trong thành phần góc của bạn, bạn nên tham chiếu một phần tử DOM từ mẫu bằng cách sử dụng @ViewChild()Sau khi chế độ xem được khởi tạo, bạn có thể sử dụng thuộc nativeElementtính của đối tượng này và chuyển đến jQuery.

Khai báo $(hoặc jQuery) là JQueryStatic sẽ cung cấp cho bạn một tham chiếu được gõ vào 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);

Ví dụ này có sẵn trên plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint sẽ phàn nàn về việc chosenkhông phải là một thuộc tính trên $, để sửa lỗi này, bạn có thể thêm một định nghĩa vào giao diện JQuery trong tệp * .d.ts tùy chỉnh của bạn

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

Tại sao mọi người làm cho nó trở thành một khoa học tên lửa? Đối với bất kỳ ai khác cần thực hiện một số nội dung cơ bản trên các phần tử tĩnh, ví dụ: bodythẻ, chỉ cần thực hiện việc này:

1. Trong index.html thêm scriptthẻ với đường dẫn đến lib jquery của bạn, không quan trọng ở đâu (theo cách này bạn cũng có thể sử dụng thẻ có điều kiện IE để tải phiên bản jquery thấp hơn cho IE9 trở xuống).
2. Trong export componentkhối của bạn có một hàm gọi mã của bạn: $("body").addClass("done");Normaly điều này gây ra lỗi khai báo, vì vậy chỉ sau khi tất cả các nhập trong tệp .ts này, hãy thêm declare var $:any;và bạn tốt để đi!

Đây là những gì làm việc cho tôi.

BƯỚC 1 - Điều đầu tiên trước tiên

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

BƯỚC 2 - NHẬP KHẨU

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

Gần đây, tôi đang viết mã ES6thay vì typescriptvà có thể importkhông có * as $trong import statement. Đây là những gì nó trông giống như bây giờ:

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

Chúc may mắn.

Bây giờ nó đã trở nên rất dễ dàng, Bạn có thể làm điều đó bằng cách khai báo biến jQuery với bất kỳ loại nào trong bộ điều khiển Angular2.

declare var jQuery:any;

Thêm điều này ngay sau khi báo cáo nhập khẩu và trước trang trí thành phần.

Để truy cập bất kỳ phần tử nào có id X hoặc Class X, bạn chỉ cần thực hiện

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

Một cách đơn giản:

1. bao gồm kịch bản

index.html

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

2. tuyên bố

my.component.ts

declare var $: any;

3. sử dụng

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

Hãy làm theo các bước đơn giản. Nó làm việc cho tôi. Hãy bắt đầu với một ứng dụng 2 góc mới để tránh mọi sự nhầm lẫn. Tôi đang sử dụng Angular cli. Vì vậy, cài đặt nó nếu bạn chưa có nó. https://cli.angular.io/

Bước 1: Tạo một ứng dụng demo góc 2

ng new jquery-demo

bạn có thể sử dụng bất kỳ tên nào. Bây giờ hãy kiểm tra xem nó có hoạt động không bằng cách chạy bên dưới cmd. (Bây giờ, hãy đảm bảo rằng bạn đang trỏ đến 'jquery-demo' nếu không sử dụng lệnh cd)

ng serve

bạn sẽ thấy "ứng dụng hoạt động!" trên trình duyệt.

Bước 2: Cài đặt Bower (Trình quản lý gói cho web)

Chạy lệnh này trên cli (đảm bảo rằng bạn đang trỏ đến 'jquery-demo' nếu không sử dụng lệnh cd):

npm i -g bower --save

Bây giờ sau khi cài đặt thành công Bower, hãy tạo tệp 'bower.json' bằng cách sử dụng lệnh bên dưới:

bower init

Nó sẽ yêu cầu đầu vào, chỉ cần nhấn enter cho tất cả nếu bạn muốn các giá trị mặc định và ở cuối loại "Có" khi nó sẽ hỏi "Có vẻ tốt không?"

Bây giờ bạn có thể thấy một tệp mới (bower.json) trong thư mục "jquery-demo". Bạn có thể tìm thêm thông tin trên https://bower.io/

Bước 3: Cài đặt jquery

Chạy lệnh này

bower install jquery --save

Nó sẽ tạo một thư mục mới (bower_components) sẽ chứa thư mục cài đặt jquery. Bây giờ bạn đã cài đặt jquery trong thư mục 'bower_components'.

Bước 4: Thêm vị trí jquery trong tệp 'angular-cli.json'

Mở tệp 'angular-cli.json' (hiện trong thư mục 'jquery-demo') và thêm vị trí jquery trong "script". Nó sẽ trông giống thế này:

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

Bước 5: Viết mã jquery đơn giản để thử nghiệm

Mở tệp 'app.component.html' và thêm một dòng mã đơn giản, Tệp sẽ trông như thế này:

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

Bây giờ Mở tệp 'app.component.ts' và thêm mã khai báo biến jquery và mã cho thẻ 'p'. Bạn cũng nên sử dụng hook vòng đời ngAfterViewInit (). Sau khi thực hiện thay đổi, tập tin sẽ trông như thế này:

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

Bây giờ hãy chạy ứng dụng góc 2 của bạn bằng cách sử dụng lệnh 'ng phục vụ' và kiểm tra nó. Nó nên hoạt động.

Bạn có thể triển khai móc vòng đời ngAfterViewInit () để thêm một số thao tác DOM

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

Hãy cẩn thận khi sử dụng bộ định tuyến vì angular2 có thể tái chế các chế độ xem .. vì vậy bạn phải chắc chắn rằng các thao tác thành phần DOM chỉ được thực hiện trong lệnh gọi đầu tiên của afterViewInit .. (Bạn có thể sử dụng các biến boolean tĩnh để làm như vậy)

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

Tôi làm điều đó theo cách đơn giản hơn - đầu tiên cài đặt jquery bằng npm trong bảng điều khiển: npm install jquery -Svà sau đó trong tệp thành phần tôi chỉ cần viết: let $ = require('.../jquery.min.js')và nó hoạt động! Dưới đây là ví dụ đầy đủ từ một số mã của tôi:

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

Trong ví dụ tôi có ví dụ:

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

BIÊN TẬP

Thay vì sử dụng:

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

sử dụng

declare var $: any;

và trong index.html của bạn đặt:

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

Điều này sẽ khởi tạo jquery chỉ một lần trên toàn cầu - điều này rất quan trọng đối với việc sử dụng các cửa sổ phương thức trong bootstrap ...

Bước 1: sử dụng lệnh: npm install jquery --save

Bước 2: bạn có thể chỉ cần nhập góc như:

nhập $ từ 'jquery';

đó là tất cả .

Một ví dụ sẽ là:

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


}

// cài đặt jquerynpm install jquery --save

// cài đặt định nghĩa kiểu cho jquerytypings install dt~jquery --global --save

// thêm thư viện jquery vào tệp cấu hình xây dựng như được chỉ định (trong tệp "angular-cli-build.js")

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

// chạy bản dựng để thêm thư viện jquery trong bản dựng ng build

// thêm cấu hình đường dẫn tương đối (trong 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'}};

// nhập thư viện jquery trong tệp thành phần của bạn

import 'jquery';

bên dưới là đoạn mã của thành phần mẫu của tôi

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

Nếu bạn sử dụng angular-cli, bạn có thể làm:

1. Cài đặt phụ thuộc :

   npm cài đặt jquery - lưu

   cài đặt npm @ type / jquery --save-dev

2. Nhập tệp :

   Thêm "../node_modules/jquery/dist/jquery.min.js" vào phần "script" trong tệp .angular-cli.json

3. Khai báo jquery :

   Thêm "$" vào phần "loại" của tsconfig.app.json

Bạn có thể tìm thêm chi tiết về cli doc góc chính thức

Sử dụng Jquery trong Angular2 (4)

Thực hiện theo các setps

cài đặt định nghĩa loại Jquery và Juqry

Để cài đặt Jquery npm install jquery --save

Đối với cài đặt định nghĩa Jquery Type npm install @types/jquery --save-dev

và sau đó chỉ cần nhập 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 
}

Sử dụng Clular góc

 npm install jquery --save

Trong angular.json dưới mảng script

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

Bây giờ để sử dụng jQuery, tất cả những gì bạn phải làm là nhập nó như sau trong bất kỳ thành phần nào bạn muốn sử dụng jQuery.

Ví dụ: nhập và sử dụng jQuery trong thành phần gốc

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

Vì tôi là một công tử, tôi nghĩ sẽ tốt nếu có một số mã làm việc.

Ngoài ra, phiên bản đánh máy Angular2 của thước đo góc có vấn đề với jQuery $ , vì vậy câu trả lời được chấp nhận hàng đầu không cho tôi một bản biên dịch rõ ràng.

Dưới đây là các bước mà tôi phải làm việc:

index.html

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

Bên trong 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);

    }
}

Chỉ viết

declare var $:any;

sau tất cả các phần nhập, bạn có thể sử dụng jQuery và đưa thư viện jQuery vào trang index.html của bạn

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

nó làm việc cho tôi

1) Để truy cập DOM trong thành phần.

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

Bạn có thể bao gồm jQuery theo cách sau. 2) Bao gồm bạn tệp jquery trong index.html trước khi tải 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>

Bạn có thể sử dụng Jquery theo cách sau, Ở đây tôi đang sử dụng trình chọn ngày của 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
         }
        });
    }
}

Công việc này cho tôi.

Tôi đang bỏ qua việc cài đặt jquery vì điểm này đã được đề cập trong tất cả các bài viết được tạo trước tôi. Vì vậy, bạn đã cài đặt jquery. Nhập t vào thành phần của bạn như thế này

import * as $ from 'jquery';

sẽ hoạt động, nhưng có một cách "góc cạnh" khác để làm điều này bằng cách tạo ra một dịch vụ.

Bước không. 1: tạo tập tin 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');

Bươc. Không. 2: đăng ký dịch vụ trong app.module.ts

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

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

Bước không. 3: tiêm dịch vụ vào thành phần của bạn 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');
    }
}

Tôi sẽ rất biết ơn nếu ai đó có thể giải thích ưu và nhược điểm của cả hai phương pháp: DI jquery như một dịch vụ so với nhập khẩu * là $ từ 'jquery';

Cách hiệu quả nhất mà tôi đã tìm thấy là sử dụng setTimeout với thời gian 0 bên trong hàm tạo trang / thành phần. Điều này cho phép jQuery chạy trong chu kỳ thực hiện tiếp theo sau khi Angular đã tải xong tất cả các thành phần con. Một vài phương thức thành phần khác có thể được sử dụng nhưng tất cả những gì tôi đã cố gắng làm việc tốt nhất khi chạy bên trong setTimeout.

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

Đây là những gì làm việc cho tôi - Angular 2 với webpack

Tôi đã thử khai báo $là kiểu anynhưng bất cứ khi nào tôi cố gắng sử dụng bất kỳ mô-đun JQuery nào, tôi sẽ nhận được (ví dụ)$(..).datepicker() không phải là một hàm

Vì tôi có Jquery trong tệp nhà cung cấp của mình. Tôi chỉ cần nhập nó vào thành phần của mình bằng cách sử dụng

import * as $ from 'jquery';

Bây giờ tôi có thể sử dụng các plugin Jquery (như bootstrap-datetimepicker)

Bạn cũng có thể thử nhập nó bằng "Tiêm". Như được mô tả ở đây: Sử dụng jQuery trong Angular / Typecript mà không có định nghĩa kiểu

Bạn chỉ có thể tiêm cá thể toàn cầu jQuery và sử dụng nó. Đối với điều này, bạn sẽ không cần bất kỳ định nghĩa hoặc kiểu chữ.

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

Khi được đặt chính xác trong app.module.ts của bạn:

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

Bạn có thể bắt đầu sử dụng nó trong các thành phần của bạn:

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

Cài đặt thư viện toàn cầu làm tài liệu chính thức tại đây

1. Cài đặt từ npm:

   npm install jquery --save

2. Thêm tệp tập lệnh cần thiết vào tập lệnh:

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

Khởi động lại máy chủ nếu bạn đang chạy nó và nó sẽ hoạt động trên ứng dụng của bạn.

Nếu bạn muốn sử dụng bên trong một thành phần, hãy sử dụng import $ from 'jquery';bên trong thành phần của bạn

Những người khác đã được đăng. nhưng tôi đưa ra một ví dụ đơn giản ở đây để có thể giúp một số người mới.

Bước 1: Trong tệp index.html tham chiếu tệp jquery cdn của bạn

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

Bước 2: giả sử chúng tôi muốn hiển thị div hoặc ẩn div khi nhấp vào nút:

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

Bước 3: Trong tệp thành phần dưới đây, nhập khẩu khai báo $ dưới đây:

declare var $: any;

hơn là tạo chức năng như dưới đây:

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

Nó sẽ hoạt động với Angular và JQuery mới nhất

Đầu tiên, cài đặt jQuery bằng npm như sau:

npm install jquery — save

Thứ hai, đi đến tệp ./angular-cli.json ở thư mục gốc của thư mục dự án Angular CLI của bạn và tìm các thuộc tính script: [] và bao gồm đường dẫn đến jQuery như sau:

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

Bây giờ, để sử dụng jQuery, tất cả những gì bạn phải làm là nhập nó vào bất kỳ thành phần nào bạn muốn sử dụng jQuery.

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

Hãy xem đoạn mã dưới đây sử dụng jQuery để tạo hiệu ứng div khi nhấp chuột, đặc biệt là trong dòng thứ hai. Chúng tôi đang nhập mọi thứ dưới dạng $ từ 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");
        });
    });
  }
}

Cài đặt jquery

Thiết bị đầu cuối $ npm install jquery

(Dành cho bootstrap 4 ...)

Thiết bị đầu cuối $ npm install popper.js

Thiết bị đầu cuối $ npm install bootstrap

Sau đó thêm importcâu lệnh vào app.module.ts.

import 'jquery'

(Dành cho bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Bây giờ bạn sẽ không còn cần <SCRIPT>các thẻ để tham khảo JavaScript.

(Bất kỳ CSS nào bạn muốn sử dụng vẫn phải được tham chiếu styles.css)

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

Khi bạn sử dụng Angular, cố gắng không sử dụng thư viện jquery. Hãy thử sử dụng các tính năng và các thư viện được tạo ra cho khung góc. Nếu bạn muốn sử dụng các hàm jquery như find () , html () , near () và vv .., tôi khuyên bạn nên sử dụng js thuần. Ví dụ: querySelector () , innerHTML , parentElement và vv ...