在 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 库。请享用！