Angular5中调用第三方js插件
话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以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; 目的是不让编译时报错 三、在具体组件中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; 目的是不让编译时报错 三种方式都介绍完了,下面来说说需要注意的事情,前两种方式需要重启服务才会有效果(我当时用的ng serve,不重启的话不起作用);第三种方式无需重启服务,直接就能看到效果。 真是吐血的教训,刚开始尝试的前两种方式,怎么着都不成功,最后第三种方式成功了,后来重启了下服务,发现前两种方式也成功了。 不知道为什么前两种方式需要重启服务,自我猜测下:也许是前两种都是修改的app文件夹外面的文件,不会自动检测和编译,而第三种方式能检测到。 不知猜的对不对,如果有大牛了解内部原理,望不吝赐教。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- angularjs – angular-meteor基于params找到MongoDb集合和返
- twitter-bootstrap-3 – 是否有必要添加reset.css bootstra
- 每日一shell(十)yum安装包for循环检查安装
- playframework – 玩2 – Scala FakeRequest withJsonBody
- 清理Yum存储库的最佳方法是什么?
- scala – 如何设计一个接受所有域的部分函数,??但依赖于某个
- GO 解决使用bee工具,报 bash: bee: command not found
- 前端丨浅谈Angular2的Modules
- angular – Ionic 3获取资产文件的内容
- UNIX再学习 -- 网络IPC:套接字