angular4.0如何引入外部插件1:import方案
引入外部插件是项目中非常重要的环节。因为部分插件以js语法写的,而ng4用的是ts语法,所以在引入时需要配置。
Step1:引入swiper插件的js文件【css在下面会讲到,先别急】
很重要的意见:亲测,如果用【方法二】引入的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,见下图
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中引入
angular4.0如何引入外部插件1:import方案的更多相关文章
- angular4.0如何引入外部插件2:declare方案
前面有个<angular4.0如何引入外部插件1:import方案>,但是有局限,因为方案1需要用到@types这个东西. 但是并不是每一个插件都有@types,所以现在写个方案2. 拿引 ...
- Vue-cli开发笔记三----------引入外部插件
(一)绝对路径直接引入: (1)主入口页面index.html中头部script标签引入: <script type="text/javascript" src=" ...
- 在vue-cli中引入外部插件
一.可以用npm下载的 现在以jquery为例子: 1 先在package.json中的dependencies中写入“jquery”:“^3.2.1”(jquery版本) 2 在npm中搜索jque ...
- 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...
- ionic3.0--angular4.0 引入第三方插件库的方法
ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings 2.搜索你 ...
- Angular4.0引入第三方框架,eg: bootstrap、jquery
最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...
- Vue style里面使用@import引入外部css, 作用域是全局的解决方案
问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...
- 如何在Android应用中引入外部网页
在某些情况下,我们需要在Android应用中引入外部网页,这里记录一下如何操作(其实很简单^.^). 先介绍一下开发环境: 开发工具:Android Studio 1.5 SDK API版本:17 操 ...
- HTML引入外部文件,解决统一管理导航栏问题。
1.IFrame引入,看看下面的代码 <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 ...
随机推荐
- 使用css修改radio、checkbox样式
input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px ...
- Android应用开发allowBackup敏感信息泄露的一点反思
1 背景 [工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 事实上这篇文章可能有些小题大作,但回过头想想还是非常有必要的,有点阴沟里翻船的感觉. ...
- 【Java集合源代码剖析】LinkedHashmap源代码剖析
转载请注明出处:http://blog.csdn.net/ns_code/article/details/37867985 前言:有网友建议分析下LinkedHashMap的源代码.于是花了一晚上时间 ...
- 注册Azure AD 应用程序
作者:陈希章 发表于2017年3月22日 在此前的文章中,我给大家介绍了分别用Graph 浏览器以及第三方工具(POSTMAN)快速体验Microsoft Graph的功能,其中有一个重要的环节就是, ...
- Python:list 和 array的对比以及转换时的注意事项
Python:list 和 array的对比以及转换时的注意事项 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6-4 ...
- 在Office Add-in中实现单点登陆(SSO)
作者:陈希章 发表于 2017年12月27日 这篇文章经过多次修改,终于在今天晚上写完了,演示用的范例代码也终于跑通了.因为这个SSO的功能目前只是Preview的状态,所以本篇文章严格参考了官方的文 ...
- JavaScript中DOM节点层次Text类型
文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...
- Oracle索引详解
Oracle索引详解(二) --索引分类 Oracle 提供了大量索引选项.知道在给定条件下使用哪个选项对于一个程序的性能来说非常重要.一个错误的选择可能会引发死锁,并导致数据库性能急剧下降或进程 ...
- 计算机和HMI设备通信之程序上下载
1.传送模式 2.串行接口传送HMI,软件采用Wincc flexable smart v3 3.设置HMI设备,给HMI设备上电 打开控制面板,双击Transfer 使能Enable Channel ...
- tensorflow ckpt文件转caffemodel时遇到的坑
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 ...