有人能告诉我,如何在Angular中使用jQuery吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法,比如在前面操纵DOM元素的类或id,但我希望有一种更干净的方式来做到这一点。
有人能告诉我,如何在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();
祝你好运。
其他回答
你可以实现生命周期钩子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;
}
}
}
你也可以尝试用InjectionToken导入它。 如下所述:在Angular/Typescript中使用jQuery而不使用类型定义
可以简单地注入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();
}
}
请遵循这些简单的步骤。这对我很管用。为了避免混淆,让我们从一个新的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应用并测试它。它应该会起作用。
这对我来说很管用。
第一步——重要的事情先做
// 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();
祝你好运。
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
}
});
}
}
这对我很有用。