在 angular-cli 專案中新增 jquery 庫

1. 通過 npm 安裝 jquery：

 npm install jquery --save 

安裝庫的型別：

要為庫新增輸入，請執行以下操作：

typings install jquery --global --save

2. 將 angular-cli-build.js 檔案的 jquery 新增到 vendorNpmFiles 陣列：

   這是必需的，因此構建系統將獲取檔案。設定完成後，angular-cli-build.js 應如下所示：

瀏覽 node_modules 並查詢要新增到供應商資料夾的檔案和資料夾。

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      // ...
      'jquery/dist/*.js'

    ]
  });
};

3. 配置 SystemJS 對映以瞭解在哪裡查詢 jquery：

   SystemJS 配置位於 system-config.ts 中，完成自定義配置後，相關部分應如下所示：

/** Map relative paths to URLs. */
const map: any = {
  'jquery': 'vendor/jquery'
};

/** User packages configuration. */
const packages: any = {
            
// no need to add anything here for jquery

};

4. 在你的 src / index.html 中新增這一行

<script src="vendor/jquery/dist/jquery.min.js" type="text/javascript"></script>

你的其他選擇是：

<script src="vendor/jquery/dist/jquery.js" type="text/javascript"></script>

要麼

<script src="/vendor/jquery/dist/jquery.slim.js" type="text/javascript"></script>

和

<script src="/vendor/jquery/dist/jquery.slim.min.js" type="text/javascript"></script>

5. 在專案原始檔中匯入和使用 jquery 庫：

   在源 .ts 檔案中匯入 jquery 庫，如下所示：

declare var $:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
    $.("button").click(function(){
       // now you can DO, what ever you want 
     });
     console.log();
  }
}

如果你正確地執行了這些步驟，那麼你現在應該在專案中使用 jquery 庫。請享用！