Angular5中调用第三方js插件的方法


Posted in Javascript onFebruary 26, 2018

话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例。

一、第一种方式:在.angular-cli.json文件中配置

步骤:

1.在项目根目录.angular-cli.json文件中找到script字段,在数组中添加要引用的所有js文件(注意先后顺序)

"scripts": ["assets/jquery-3.2.1.js","assets/jquery.nicescroll.js","assets/ion.rangeSlider.js"],

2.在需要用该插件的组件中(.ts文件中)做如下声明:declare var $:any;

目的是不让编译时报错

3.接下来在ngOnInit方法中就能正常用上面的三款插件了。

二、第二种方式:在index.html页面上引用插件

步骤:

1.在根目录的index.html页面中添加如下引用:

<script type="text/javascript" src="assets/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="assets/jquery.nicescroll.js"></script>

2.在需要用该插件的组件中(.ts文件中)做如下声明:declare var $:any;

目的是不让编译时报错

3.接下来在ngOnInit方法中就能正常用上面的三款插件了

三、在具体组件中import 插件

步骤:

1.在需要用到插件的ts文件中添加如下引用:

import "assets/jquery-3.2.1.js"; 
import "assets/jquery.nicescroll.js"; 
import "assets/ion.rangeSlider.js";

2.在需要用该插件的组件中(.ts文件中)做如下声明:declare var $:any;

目的是不让编译时报错

3.接下来在ngOnInit方法中就能正常用上面的三款插件了

三种方式都介绍完了,下面来说说需要注意的事情,前两种方式需要重启服务才会有效果(我当时用的ng serve,不重启的话不起作用);第三种方式无需重启服务,直接就能看到效果。

真是吐血的教训,刚开始尝试的前两种方式,怎么着都不成功,最后第三种方式成功了,后来重启了下服务,发现前两种方式也成功了。

不知道为什么前两种方式需要重启服务,自我猜测下:也许是前两种都是修改的app文件夹外面的文件,不会自动检测和编译,而第三种方式能检测到。

不知猜的对不对,如果有大牛了解内部原理,望不吝赐教。

以上这篇Angular5中调用第三方js插件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
angular2中使用第三方js库的实例
Feb 26 #Javascript
vue 子组件向父组件传值方法
Feb 26 #Javascript
vue2 前端搜索实现示例
Feb 26 #Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 #Javascript
vue的全局提示框组件实例代码
Feb 26 #Javascript
Angular4 ElementRef的应用
Feb 26 #Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
Prototype Array对象 学习
2009/07/19 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
金融专业个人求职信
2013/09/22 职场文书
营业员实习自我鉴定
2013/12/07 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
《太阳》教学反思
2014/02/21 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
Css预编语言及区别详解
2021/04/25 HTML / CSS
springboot用户数据修改的详细实现
2022/04/06 Java/Android