有人能告诉我，如何在Angular中使用jQuery吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法，比如在前面操纵DOM元素的类或id，但我希望有一种更干净的方式来做到这一点。
当前回答
这对我来说很管用。
第一步——重要的事情先做
// 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();
#更新- 2017年2月
最近，我正在用ES6而不是typescript编写代码，并且能够在导入语句中不使用*作为$导入。这是它现在的样子:
import $ from 'jquery';
//
$('#elemId').width();
祝你好运。
其他回答
只写
declare var $:any;
在所有导入部分之后，你可以使用jQuery并在index.html页面中包含jQuery库
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
这对我很有效
与ng1相比，在Angular2中使用jQuery非常简单。如果你使用的是TypeScript，你可以先引用jQuery TypeScript定义。
tsd install jquery --save
or
typings install dt~jquery --global --save
TypescriptDefinitions不是必需的，因为你可以使用任何类型作为$或jQuery的类型
在你的angular组件中，你应该使用@ViewChild()从模板中引用一个DOM元素，在视图初始化后，你可以使用该对象的nativeElement属性并将其传递给jQuery。
将$(或jQuery)声明为querystatic将为您提供对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会抱怨选择不是$上的属性，为了解决这个问题，你可以在自定义的*.d中添加一个定义到JQuery接口。ts文件
interface JQuery {
chosen(options?:any):JQuery;
}
请遵循这些简单的步骤。这对我很管用。为了避免混淆，让我们从一个新的angular 2应用开始。我使用的是Angular cli。因此，如果您还没有安装它，请安装它。 https://cli.angular.io/
步骤1:创建一个演示angular 2应用程序
ng new jquery-demo
您可以使用任何名称。现在通过在cmd下运行检查它是否正在工作。(现在，如果不使用cd命令，请确保您指向'jquery-demo')
ng serve
你会在浏览器上看到“app works!”
步骤2:安装Bower (web包管理器)
在cli下运行这个命令(如果不使用cd命令，请确保你指向的是'jquery-demo'):
npm i -g bower --save
现在在成功安装凉亭后，创建一个“凉亭”。Json文件，使用以下命令:
bower init
它会要求输入，如果你想要默认值，只需要按enter键，最后输入“Yes”，当它会问“看起来不错吗?”
现在你可以在"jquery-demo"文件夹中看到一个新文件(bower.json)。你可以在https://bower.io/上找到更多信息
步骤3:安装jquery
执行此命令
bower install jquery --save
它将创建一个新文件夹(bower_components)，其中包含jquery安装文件夹。现在你已经在“bower_components”文件夹中安装了jquery。
第四步:在angular-cli中添加jquery location。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'标签的代码。你也应该使用生命周期钩子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();
});
});
}
}
现在使用'ng serve'命令运行你的angular 2应用并测试它。它应该会起作用。
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)在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
}
});
}
}
这对我很有用。
//install jquery——保存
//安装类型定义为jquery类型安装dt~jquery——global——保存
//添加jquery库到build配置文件中(在"angular-cli-build.js"文件中)
vendorNpmFiles: [
.........
.........
'jquery/dist/jquery.min.js'
]
//运行build将jquery库添加到build ng build中
//添加相对路径配置(在system-config.js中) /**映射相对路径到url。* / Const map: any = { …, ……, “jquery”:“供应商/ 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(){}
}
推荐文章
- NullInjectorError: AngularFirestore没有提供程序
- 如何在Angular2中截断文本?
- 如何在Angular2 ngSwitch语句中使用typescript enum值
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Angular CLI错误:serve命令需要在Angular项目中运行，但是找不到项目定义
- 找到合成属性@panelState。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。
- 在Angular中上传文件?
- 模板驱动表单和响应式表单之间的实际区别是什么?
- Angular 2+和debounce
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
