Angular4中使用jquery和bootstrap

在angular开发中某些场景可能需要jquery和bootstrap，那么如何使用它们呢？

Angular中引用jquery

安装

第一步，我们使用npm安装jquery

1	npm install --save jquery

使用

我们在ts文件中引入jquery。

1
2
3

import * as $ from 'jquery';
// 可以在ngOninit方法中打印进行测试
console.log($('body'));

引入jquery类型

在使用过程中，好像是没有什么问题的，但是好像通过点号调用jquery方法时，没有任何代码提示（我使用的是VSCode）。原因是编辑器不识别jquery的类型，所以不知道jquery中可以调用哪些方法。因此我们需要引入类型。

1	npm install --save @types/jquery

这个时候，我们再通过点号调用jquery方法时，就会有代码提示了。如：

1	$('body').hide();

Angular中引用bootstrap

如何在angular中使用bootstrap呢？方法是差不多的。首先我们安装bootstrap。

1	npm install --save bootstrap

我们主要用到的是bootstrap.min.css和bootstrap.min.js。需要在.angular-cli.json中进行配置。

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

我配置之后还是不生效，可能是由于我ng eject后配置出了些问题，后续改下webpack配置应该可以实现。这里我先放在index.html中引用了。

<!-- 引入js -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">

配置完成后，localhost可以正常使用bootstrap了。但是打包时出现问题了。因为index.html引用的是node_modules里面的资源，而我的webpack资源配置没有加上它们，导致404问题。于是我把这三个文件放在了assets里面，改成如下引用方式：

1
2
3

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">