有人能告诉我，如何在Angular中使用jQuery吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法，比如在前面操纵DOM元素的类或id，但我希望有一种更干净的方式来做到这一点。
当前回答
全球库安装作为正式文档在这里
从npm安装: NPM安装jquery 在脚本中添加所需的脚本文件: “脚本”:( “node_modules / jquery / dist / jquery.slim.js” ),
重启服务器，如果你正在运行它，它应该工作在你的应用程序。
如果你想使用内部单个组件使用import $ from 'jquery';在组件内部
其他回答
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
}
});
}
}
这对我很有用。
与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应用并测试它。它应该会起作用。
因为我是一个笨蛋，我认为有一些工作代码会很好。
此外，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);
}
}
首先，使用npm安装jQuery，如下所示:
npm install jquery — save
其次，进入。/angular-cli。在你的Angular CLI项目文件夹的根目录下找到script:[]属性，并包括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检测页面的滚动位置
- 如何在JSON中使用杰克逊更改字段名
- 在JavaScript中根据键值查找和删除数组中的对象
- 防止在ASP中缓存。NET MVC中使用属性的特定操作
- jQuery: keyPress退格键不火?
- XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file:/// to file:///(无服务器)
- 重置setTimeout
- jQuery有不聚焦的方法吗?
- Angular 5 -复制到剪贴板
- 错误:在switch上没有指定name属性的窗体控件的值访问器
- jQuery -替换字符串中某个字符的所有实例
- Ng-repeat结束事件
- 模糊vs聚焦-有什么真正的区别吗?
- 如何用jQuery / JavaScript解析JSON数据?
- jQuery在请求体中发布有效的json
