如何使用 jQuery 和 Angular？

Question

谁能告诉我，如何将 jQuery 与 Angular 一起使用？

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

我知道有一些解决方法，例如操纵 DOM 元素的 class 或 id前期，但我希望有一种更简洁的方法。

Answer 1

与 ng1 相比，使用 Angular2 中的 jQuery 轻而易举。如果您使用的是 TypeScript，您可以先参考 jQuery typescript 定义。

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

TypescriptDefinitions 不是必需的，因为您可以使用 any 作为 $ 或 jQuery

的类型

在您的 angular 组件中，您应该使用 @ViewChild() 从模板中引用一个 DOM 元素。视图初始化后，您可以使用 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);

这个例子在 plunker 上可用：http://plnkr.co/edit/Nq9LnK?p=preview

tslint 会抱怨 chosen 不是 $ 上的属性，要解决此问题，您可以在自定义 *.[=34= 中向 JQuery 接口添加定义] 文件

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

Answer 2

您可以实现生命周期挂钩 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;
        }
    }
}

Answer 3

我发现最有效的方法是在 page/component 构造函数中使用时间为 0 的 setTimeout。这让我们在 Angular 加载完所有子组件后的下一个执行周期中 jQuery 运行。可以使用其他一些组件方法，但我尝试过的所有方法在 setTimeout 中运行时效果最好。

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

Answer 4

1) 在component.

中访问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) 在 angular2 加载

之前将 jquery 文件包含在 index.html 中

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

这对我有用。

Answer 5

我用更简单的方法来做 - 首先在控制台中通过 npm 安装 jquery：npm install jquery -S 然后在组件文件中我只写：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 - 这对于在 bootstrap...

中使用模态 windows 很重要

Answer 6

为什么每个人都把它当作火箭科学？对于需要对静态元素做一些基本操作的其他人，例如 body 标记，只需执行以下操作：

在 index.html 中添加 script 标签和你的 jquery 库的路径，不管在哪里（这样你也可以使用 IE 条件标签来加载较低版本的jquery 适用于 IE9 及更低版本）。
在你的 export component 块中有一个调用你的代码的函数：$("body").addClass("done"); 通常这会导致声明错误，所以在这个 .ts 文件中的所有导入之后，添加 declare var $:any; 和一切顺利！

Answer 7

现在变得非常简单，您只需在 Angular2 控制器中声明 jQuery 任何类型的变量即可。

declare var jQuery:any;

在导入语句之后和组件装饰器之前添加它。

要访问 ID 为 X 或 Class X 的任何元素，您只需要做

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

Answer 8

//正在安装jquerynpm install jquery --save

//安装类型定义为 jquerytypings install dt~jquery --global --save

//将 jquery 库添加到指定的构建配置文件中（在 "angular-cli-build.js" 文件中）

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

//运行构建在构建中添加jquery库ng build

//添加相对路径配置(in 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库

import 'jquery';

下面是我的示例组件的代码片段

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

Answer 9

因为我是个笨蛋，我认为有一些工作代码会很好。

此外，angular-protractor has issues with the jQuery $ 的 Angular2 打字版本，因此最高接受的答案没有给我一个干净的编译。

以下是我必须执行的步骤：

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

    }
}

Answer 10

随便写

declare var $:any;

导入所有部分后，您可以使用 jQuery 并在 index.html 页面中包含 jQuery 库

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

对我有用

Answer 11

这对我有用。

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

#更新 - `Feb - 2017`

最近，我正在用 ES6 而不是 typescript 编写代码，并且能够 import 而不是 import statement 中的 * as $。这是现在的样子：

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

祝你好运。

Answer 12

请按照这些简单的步骤操作。它对我有用。让我们从一个新的 angular 2 应用程序开始，以避免任何混淆。我正在使用 Angular cli。因此，如果您还没有安装它，请安装它。 https://cli.angular.io/

第 1 步：创建演示 angular 2 个应用程序

ng new jquery-demo

您可以使用任何名称。现在通过 cmd 下面的运行ning 检查它是否正常工作。（现在，如果不使用 cd 命令，请确保你指向 'jquery-demo'）

ng serve

您将在浏览器上看到 "app works!"。

第 2 步：安装 Bower（网络包管理器）

运行 cli 上的此命令（如果不使用 cd 命令，请确保您指向 'jquery-demo'）：

npm i -g bower --save

成功安装 Bower 后，使用以下命令创建 'bower.json' 文件：

bower init

它会要求输入，如果你想要默认值，只需按回车键，最后键入 "Yes" 当它询问 "Looks good?"

现在您可以在文件夹 "jquery-demo" 中看到一个新文件 (bower.json)。您可以在 https://bower.io/

上找到更多信息

步骤 3：安装 jquery

运行这个命令

bower install jquery --save

它将创建一个新文件夹 (bower_components)，其中将包含 jquery 安装文件夹。现在您在 'bower_components' 文件夹中安装了 jquery。

步骤 4：在 'angular-cli.json' 文件中添加 jquery 位置

打开 'angular-cli.json' 文件（存在于 'jquery-demo' 文件夹中）并在 "scripts" 中添加 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' 文件并为 'p' 标记添加 jquery 变量声明和代码。您还应该使用生命周期钩子 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();
             });
           });
     }
}

现在运行您的 angular 2 应用程序，使用 'ng serve' 命令并对其进行测试。它应该有效。

Answer 13

这对我有用 - Angular 2 with webpack

我尝试将 $ 声明为 any 类型，但每当我尝试使用任何 JQuery 模块时，我得到的（例如）$(..).datepicker() 不是函数

因为 Jquery 包含在我的 vendor.ts 文件中，我只是使用

将它导入到我的组件中

import * as $ from 'jquery';

我现在可以使用 Jquery 插件（例如 bootstrap-datetimepicker）

Answer 14

您也可以尝试使用 "InjectionToken" 导入它。如此处所述：Use jQuery in Angular/Typescript without a type definition

您可以简单地注入 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();
    }
}

Answer 15

在 Angular2(4) 中使用 Jquery

遵循这些设置

安装 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 
}

Answer 16

一个简单的方法：

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

Answer 17

如果你使用 angular-cli 你可以这样做：

安装依赖[=36=] :

npm 安装jquery --保存

npm install @types/jquery --save-dev

导入文件：

将“../node_modules/jquery/dist/jquery.min.js”添加到.angular-cli.json文件
[=中的"script"部分37=]
声明jquery:

将“$”添加到 tsconfig.app.json
的 "types" 部分

您可以在 official angular cli doc
上找到更多详细信息

Answer 18

第 1 步：使用命令：npm install jquery --save

第 2 步：您只需将 angular 导入为 :

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


}

Answer 19

我将跳过 jquery 的安装，因为在我之前创建的所有帖子中都提到了这一点。所以，您已经安装了 jquery。像这样将 t 导入您的组件

import * as $ from 'jquery';

会起作用，但还有另一种“angular”方法可以通过创建服务来实现。

步号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 作为服务与 import * as $ from 'jquery';

Answer 20

安装jquery

终端$npm install jquery

（对于 bootstrap 4...）

终端$npm install popper.js

终端$npm install bootstrap

然后将import语句添加到app.module.ts。

import 'jquery'

（对于 bootstrap 4...）

import 'popper.js'
import 'bootstrap'

现在您将不再需要 <SCRIPT> 标签来引用 JavaScript。

（您要使用的任何 CSS 仍必须在 styles.css 中引用）

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

Answer 21

全局库安装 as Official documentation here

从 npm 安装：

npm install jquery --save
将需要的脚本文件添加到脚本中：

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

如果您运行它，请重新启动服务器，它应该可以在您的应用程序上运行。

如果您想在单个组件内部使用，请在组件内部使用 import $ from 'jquery';

Answer 22

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

Answer 23

其他人已发布。但我在这里举一个简单的例子，希望对新手有所帮助。

第 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

Answer 24

首先，使用 npm 安装 jQuery，如下所示：

npm install jquery — save

其次，转到 Angular CLI 项目文件夹根目录下的 ./angular-cli.json 文件，找到脚本：[] 属性，并包含 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");
        });
    });
  }
}

Answer 25

Angular 12

npm i jquery

这很重要：npm i @types/jquery

angular.json

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

.ts 文件

import * as $ from "jquery";

如何使用 jQuery 和 Angular？

How to use jQuery with Angular?

jquery

angular

第 1 步 - 要事第一

第 2 步 - 导入

#更新 - Feb - 2017

#更新 - `Feb - 2017`