在Angular的開發(fā)過程中可能會用到j(luò)Query椎瘟。有時候不直接使用，使用的第三方框架可能也會用到。因此，我在這里總結(jié)了一下我在Angular2-4項目中是如何引入jQuery的喳钟。
1.安裝jQuery
首先在jQuery官網(wǎng)找到適合自己的按照方式屁使，我這里直接用NPM的方式安裝：
npm install jquery --save
加入--save是將jQuery寫入當(dāng)前項目的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對象，例如創(chuàng)建一個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，
相當(dāng)于一個選擇器应狱，就是獲得頁面上的元素共郭，然后用$符號成功將其轉(zhuǎn)換成一個jQuery對象。
參考
how to use jQuery with Angular2?
[Question] jQuery inclusion for Bootstrap
