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 相关文章推荐
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
jquery 手势密码插件
Mar 17 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
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分页时出现的Fatal error的解决方法
2011/04/18 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python中list初始化方法示例
2016/09/18 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python3实现多线程聊天室
2018/12/12 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
大学生上课迟到检讨书
2014/10/15 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书