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的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
javascript常见操作汇总
Sep 03 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 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设计模式 Singleton(单例模式)
2011/06/26 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python 提取文件的小程序
2009/07/29 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python中关于浮点数的冷知识
2019/09/22 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python中id函数运行方式
2020/07/03 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
管理信息系学生的自我评价
2014/01/11 职场文书
品牌宣传方案
2014/03/21 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
期末考试复习计划
2015/01/19 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
spring cloud 配置中心native配置方式
2021/09/25 Java/Android