0

0

在Angular5中如何调用第三方js插件(详细教程)

亚连

亚连

发布时间:2018-06-04 14:06:23

|

2677人浏览过

|

来源于php中文网

原创

下面我就为大家分享一篇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页面中添加如下引用:

 

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

目的是不让编译时报错

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

Android如何使用WebService接口 中文WORD版
Android如何使用WebService接口 中文WORD版

本文档主要讲述的是Android如何使用WebService接口;WebService是一种基于SOAP协议的远程调用标准。通过WebService可以将不同操作系统平台,不同语言、不同技术整合到一起。在OPhone SDK中并没有提供调用WebService的库,因此,需要使用第三方类库(KSOAP2)来调用WebService。在本文将介绍在OPhone中调用WebService的具体细节,并在最后给出一个完整的例子来演示如何使用KSOAP2来调用WebService。感兴趣的朋友可以过来看看

下载

三、在具体组件中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,不重启的话不起作用);第三种方式无需重启服务,直接就能看到效果。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详细介绍JsChart组件使用方法以及功能

通过在ionic2中使用自动生成器的方法步骤有哪些?

通过AjaxUpLoad.js实现文件上传的代码示例(详细教程)

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号