1.import方案
Step1:引入swiper插件的js文件
很重要的意见:亲测,如果用【方法二】引入的js导致效果有问题,请用【方法一】再试
方法一:在index.html中引入
可以用线上的地址,或者是下载到assets文件夹下
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>
方法二:命令行引入
npm install swiper --save
npm install swiper --save-dev
备注:--save配置在生产环境;--save-dev配置在开发环境
命令执行完毕后,生产的swiper包会下载到node_modules文件夹下的swiper文件夹。
同时在package.json文件下会自动引入swiper配置。
在angular-cli.json文件中配置js路径【相对于index.html的路径】
Step2:配置swiper插件被ts识别
为什么要这步操作呢?因为ts并不能准确识别js语法,所以需要用ts中的interface接口,将js转化成ts并暴露出来。
npm install @types/swiper --save
npm install @types/swiper --save-dev
操作完成后,会在node_modules文件夹下生成@types_swiper文件夹。
查看文件夹下的index.d.ts文件,不明觉厉。
Step3:在app.module.ts中将被识别的swiper插件引入项目中
import * as A from 'B';
打开node_modules文件夹下的@types_swiper文件夹下的index.d.ts,见下图
[图片上传失败...(image-5d446b-1515565251489)]
A:指的是插件的类,比如Swiper、$
B:指的是index.d.ts中的模块名称
import * as Swiper from 'swiper';
Step4:引入插件的css
方法一:在index.html中引入
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
方法二:在styles.css中引入
@import "../node_modules/swiper/dist/css/swiper";
1、css的后缀不用写,写了反而报错
2、iconfont.css在引入时会报错,请在index.html中引入
2.daclare方案
因为方案1需要用到@types这个东西。但是并不是每一个插件都有@types,所以现在写个方案2。
大致步骤和《angular4.0如何引入外部插件1:import方案》是相同的。
区别是不使用import导入插件。所以也就不需要使用@types识别操作了。
Steps1:引入WX的SDK文件
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script></pre>
Steps2:声明变量wx
如果直接在ts中console.log(wx);输出是undefined;
因为并未声明变量wx,所以我们需要声明。
为了实现:一次声明,全局使用。在typings.d.ts文件中写入 declare var wx: any;
【注意:jq的$符号在typings.d.ts中声明报错。所以想配置jq,请移步《angular4.0如何引入外部插件1:import方案》】