在Angular的开发过程中可能会用到jQuery。有时候不直接使用,使用的第三方框架可能也会用到。因此,我在这里总结了一下我在Angular2-4项目中是如何引入jQuery的。
1.安装jQuery
首先在jQuery官网找到适合自己的按照方式,我这里直接用NPM的方式安装:
npm install jquery --save
加入--save
是将jQuery写入当前项目的package.json中
2.配置webpack.config.js
在webpack.config.js的config.plugins下加入:
config.plugins = [
//省略掉了其他配置
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
];
3.声明与使用
使用webpack的话需要在vendor.ts
文件中import
jQuery:
import 'jquery/dist/jquery.js'
我引用的semantic-ui 需要使用jQuery对象,例如创建一个search对象需要:
$('xxxx').search(xxx)
在Angular2~4的Component中不能直接使用jQuery的$符号,因此我们在Component文件的顶部引入$
:
declare var $: any;
然后就可以正常使用jQuery了,例如:
ngOnInit() {
$(this.brandInput.nativeElement).search({
apiSettings: {
url: '/api/brand/name?q={query}'
},
fields: {
results : 'results',
title : 'title',
},
searchDelay:300
})
}
我在ngOnInit方法中获得Angular的页面元素brandInput的nativeElement,
相当于一个选择器,就是获得页面上的元素,然后用$符号成功将其转换成一个jQuery对象。
参考
how to use jQuery with Angular2?
[Question] jQuery inclusion for Bootstrap