如何在Angular中使用jQuery？

How to use jQuery with Angular?

有人能告诉我，如何使用jquery和angular吗？

1
2
3
4
5

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

我知道有一些解决方法，比如预先操纵dom元素的类或ID，但我希望有一种更干净的方法。

相关讨论

与NG1相比，使用Angular2的jQuery是轻而易举的。如果您使用的是typescript，那么可以首先引用jquery typescript定义。

1
2
3

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

不需要类型脚本定义，因为您可以使用any作为$或jQuery的类型。

在角度组件中，应该使用@ViewChild()从模板引用一个dom元素。在视图初始化之后，可以使用该对象的nativeElement属性并传递给jquery。

将$或jQuery声明为jquerystatic将为您提供对jquery的类型化引用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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=预览

tslint会抱怨chosen不是$上的属性，要解决这个问题，可以在自定义的*.d.ts文件中向jquery接口添加一个定义。

1
2
3

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

相关讨论

它起作用了！谢谢。不幸的是，ElementRef.domElement的Doc声明(不赞成访问dom的方法，即将进行替换)。同时，setTimeout似乎是一种解决方案。无论如何谢谢你：)
我不知道为什么需要setTimeout的解决方案。我尝试了其他几个jquery组件，似乎所有组件都需要这个变通方法来正确初始化。我希望这会在未来的NG2版本中有所改变。
因为构造时，只有一些幻影DOM元素而不是最终元素。实际元素只有在构造函数完成后才可用。
我在使用jquery插件和Angular2路由器时遇到一些问题(DropZone，已选择…)。当组件加载到出口中时，将调用构造函数并处理模板…可以初始化jquery插件(使用setimout hack)。但是，当您加载另一个组件(使用路由器)并返回到第一个组件时。Angular2循环视图(尽管它调用了构造函数)。因此，第一次由角插件构建的元素再次显示：(
在alpha37 github.com/angular/angular/blob/2.0.0-alpha.37/changelog.md core中添加了新的回调：added aftercontentinit、afterviewinit和afterviewchecked hooks(d49bc43)，关闭3897
@穆拉佐瓦比：对于我们这些新认识的人，你能解释一下你的评论的意义吗？另外一个答案真的很棒！(如果是这样的话！！)
可以实现Lifecycle Hook AfterViewInit()以添加一些DOM操作AfterViewInit()var el:any=elelemtref.domElement.children[0]；$(el).choosed().on('change'，(e，args)=>u this.selectedValue=args.selected；)使用路由器时要小心，因为angular2可能会回收vi电子战。。因此，必须确保仅在AfterViewInit的第一个调用中完成DOM元素的操作。(可以使用静态布尔变量进行此操作)
您是否尝试使用来自HTTP请求的数据？谢谢你的回复。
谢谢你的回答，这对我有很大帮助！我想我现在用的是typings，那么用typings而不是tsd更新你的评论怎么样？我想它可以帮助其他人：)
这并不难设置，但与角度1相比，它肯定不是"微风"。在Angular1中，您不必做任何事情，您可以在任何地方使用jquery。角度1构建在jquery之上。
通过类型设置安装定义后，jQueryStatic仍然无法识别。
我和冈萨洛有同样的问题
我想我们需要更新一下，因为我们现在用NPM来打字。
npm install @types/jquery --save
请注意，如果模板中的元素位于*ngif内，则elementRef返回Undefined。改为使用[隐藏]
在NPM文档中，它说您应该能够执行import $ from"jquery"，这是否有效？(似乎没有)-npmjs.com/package/jquery
这对我来说确实有效-stackoverflow.com/a/41790241/228369
最好使用render2类来操作DOM。角度.io/api/core/render2
需要更新答案
通过nmp安装jquery后，像这样导入declare var $:any;或import $ from"jquery"; 。

为什么每个人都把它变成火箭科学？对于其他需要在静态元素上做一些基本工作的人，例如body标记，只需这样做：

在index.html中，添加带有jquery lib路径的script标记并不重要(这样，您还可以使用ie条件标记加载ie9及以下版本的jquery)。

在您的export component块中，有一个函数调用您的代码：$("body").addClass("done");normaly，这会导致声明错误，所以在这个.ts文件中导入所有内容之后，添加declare var $:any;就可以了！

相关讨论

这就是我的工作。

第一步-先做第一件事

1
2
3
4
5

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

第2步-进口

1
2
3
4
5
6
7
8
9
10
11

// 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 statement中不使用* as $的情况下使用import。这就是现在的情况：

1
2
3

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

祝你好运。

相关讨论

现在，它变得非常简单，您可以通过在Angular2控制器中使用任何类型声明jQuery变量来实现。

1	declare var jQuery:any;

在导入语句之后和组件修饰器之前添加这个。

要访问ID为x或类为x的任何元素，只需执行以下操作

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

相关讨论

一个简单的方法：

1。包含脚本

索引文件

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

2。声明

M.组件

1	declare var $: any;

三.使用

1
2
3
4
5
6
7
8

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

相关讨论

请遵循这些简单的步骤。这对我很有用。让我们从一个新的角度2应用程序开始，以避免任何混淆。我正在使用Angular CLI。所以，如果你还没有的话，就安装它。https://cli.angular.io网站/

第1步：创建演示Angular2应用程序

1	ng new jquery-demo

你可以用任何名字。现在，通过在命令下面运行来检查它是否工作。(现在，如果不使用cd命令，请确保指向"jquery demo")。

ng serve

您将看到"应用程序工作！"在浏览器上。

步骤2：安装Bower(Web包管理器)

在CLI上运行此命令(如果不使用cd命令，请确保指向"jquery demo")：

1	npm i -g bower --save

现在，在成功安装bower之后，使用以下命令创建一个"bower.json"文件：

1	bower init

它将要求输入，如果需要默认值，只需按Enter键，在结尾处键入"Yes"，当它要求"LooksGood？"

现在您可以在"jquery demo"文件夹中看到一个新文件(bower.json)。你可以在https://bower.io上找到更多信息/

步骤3:安装jquery

运行此命令

1	bower install jquery --save

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

步骤4:在"angular cli.json"文件中添加jquery位置

打开"angular cli.json"文件(存在于"jquery demo"文件夹中)并在"scripts"中添加jquery位置。它看起来像这样：

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

步骤5：编写简单的jquery代码进行测试

打开"app.component.html"文件并添加一个简单的代码行，文件将如下所示：

1
2
3
4
5

{{title}}

<p>
If you click on me, I will disappear.
</p>

现在打开'app.component.ts'文件，添加jquery变量声明和'p'标记的代码。您还应该使用Lifecycle hook ngafterview init()。更改后，文件将如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

现在使用"ng serve"命令运行Angular2应用程序并测试它。它应该起作用。

相关讨论

可以实现Lifecycle hook ngafterview init()以添加一些DOM操作

1
2
3
4
5
6

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

使用路由器时要小心，因为Angular2可能会回收视图。因此，必须确保仅在AfterViewInit的第一个调用中完成DOM元素的操作。(可以使用静态布尔变量进行此操作)

1
2
3
4
5
6
7
8
9
10
11
12

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

相关讨论

我用更简单的方法来做——首先在控制台：npm install jquery -S中通过npm安装jquery，然后在组件文件中只写：let $ = require('.../jquery.min.js')就可以了！下面是一些我的代码的完整示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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，我有：

1	something...

编辑

或者，不使用：

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

使用

1	declare var $: any;

在index.html中输入：

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

这只会初始化jquery一次globaly-这对于在引导程序中使用模式窗口很重要…

相关讨论

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

步骤2：您可以简单地将角度导入为：

从"jquery"导入$

这就是全部。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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"文件中)

1
2
3
4
5

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

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

//添加相对路径配置(在system config.js中)/** Map relative paths to URLs. */
const map: any = {
.....,
.......,
'jquery': 'vendor/jquery/dist'
};

1
2
3
4
5
6

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

//在组件文件中导入jquery库

1	import 'jquery';

下面是我的示例组件的代码截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

相关讨论

如果使用Angular CLI，可以执行以下操作：

安装依赖项：

npm安装jquery--保存

npm install@types/jquery--保存dev

导入文件：

将"../node_modules/jquery/dist/jquery.min.js"添加到.angular-cli.json文件的"script"部分

声明jquery:

将"$"添加到tsconfig.app.json的"类型"部分

您可以在官方Angular CLI文档中找到更多详细信息。

相关讨论

在Angular2(4)中使用jQuery

遵循这些设置

安装jquery和juqry类型定义

用于jquery安装npm install jquery --save。

用于jquery类型定义安装npm install @types/jquery --save-dev。

然后简单地导入jquery

1
2
3
4
5
6
7
8
9
10
11

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
}

相关讨论

因为我是个笨蛋，所以我想最好有一些可工作的代码。

另外，角度量角器的角度2类型版本与jquery $有问题，所以接受的最高答案不能给我一个干净的编译。

以下是我要做的步骤：

索引文件

1
2
3
4
5

在my.component.ts中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

}
}

< BR>1)访问组件中的DOM。

1
2
3
4
5
6
7
8

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<head>
Angular 2 QuickStart
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">


<script src="js/jquery-2.0.3.min.js">
<script src="js/jquery-ui.js">
<script src="node_modules/es6-shim/es6-shim.min.js">
<script src="node_modules/zone.js/dist/zone.js">
<script src="node_modules/reflect-metadata/Reflect.js">
<script src="node_modules/systemjs/dist/system.src.js">
<script src="systemjs.config.js">

System.import('app').catch(function(err){ console.error(err); });

</head>

您可以按照以下方式使用jquery，这里我使用的是jquery ui日期选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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。像这样将t导入组件

1	import * as $ from 'jquery';

这是可行的，但有另一种"角度"的方法可以通过创建服务来实现。

步骤1：创建jquery.service.ts文件。

1
2
3

// 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中注册服务

1
2
3
4
5
6

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

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

步骤3：将服务注入组件my-super-duper.component.ts

1
2
3
4
5
6
7
8
9

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*作为$from'jquery'；

只写

1	declare var $:any;

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

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

它对我有用

相关讨论

这是我的工作-角2与Webpack

我试图将$声明为any类型，但每当我试图使用jquery模块时，我得到(例如)$(..).datepicker()不是一个函数。

因为我的vendor.ts文件中包含jquery，所以我只是使用

import * as $ from 'jquery';

我现在可以使用jquery插件(比如bootstrap datetimepicker)。

相关讨论

您还可以尝试使用"injectiontoken"导入它。如本文所述：在没有类型定义的Angular/TypeScript中使用jQuery

您可以简单地注入jquery全局实例并使用它。为此，您将不需要任何类型定义或类型。

1
2
3
4
5
6
7
8
9
10
11

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中正确设置时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

您可以在组件中开始使用它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

我发现的最有效的方法是在页面/组件构造函数内使用时间为0的setTimeout。这让jquery在Angular加载完所有子组件之后在下一个执行周期中运行。可以使用其他一些组件方法，但在设置超时内运行时，我所做的所有尝试都是最好的。

1
2
3
4
5
6
7

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

相关讨论

全球图书馆安装作为官方文件

从NPM安装：

npm install jquery --save

向脚本中添加所需的脚本文件：

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

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

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

安装jQuery

终端$npm install jquery。

(用于引导4…)

终端$EDOCX1[1]

终端$npm install bootstrap。

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

1	import 'jquery'

(用于引导4…)

1 2	import 'popper.js' import 'bootstrap'

现在，您将不再需要标记来引用javascript。

(您要使用的任何CSS都必须在styles.css中引用)

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

其他人已经发布了。但我在这里举个简单的例子，这样可以帮助一些新来的人。

步骤1：在index.html文件中，参考jquery cdn

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

第2步：假设我们想在单击按钮时显示DIV或隐藏DIV：

1
2
3
4
5
6
7
8
9
10

<input type="button" value="Add New" (click)="ShowForm();">

//-----.HideMe{display:none;} is a css class----//

</app-pricedetails>

</app-pricemng>

步骤3：在下面的组件文件中，导入声明$如下：

1	declare var $: any;

而不是像下面这样创建函数：

1
2
3

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

它将与最新的Angular和JQuery一起工作

使用Angular时，请尽量不要使用jQuery库。尝试使用为角框架生成的功能和库。如果您想使用jquery函数，如find()、html()、closest()等，我建议使用纯JS。示例：queryselector()、innerhtml、parentelement等…

使用Angular CLI

1	npm install jquery --save

在脚本数组下的angular.json中

1	"scripts": ["../node_modules/jquery/dist/jquery.min.js" ] //for latest version copy full path of node_modules>jquery>dist>jquery.min.js to avoid path error

现在要使用jquery，您所要做的就是将它导入到您想要使用jquery的任何组件中，如下所示。

1	import * as $ from 'jquery';

例如，在根组件中使用jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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 {

public ngOnInit()
{
//jQuery code
});
});
}
}