在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