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;

目的是不让编译时报错

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插件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS中如何使用echart插件示例详解

    AngularJS中如何使用echart插件示例详解

    第一步:准备 首先我们要做的是在我们的项目中引入我们所需要的依赖,假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令 1. cnpm install angular --save 2. cnpm install echarts --save 在安装完毕后你将会得到一个命名为node_modules的文件夹,而我们需要的东西都在里面,当一切准备完毕后我们就可以开始我们的开发了. 第二步:开发 我认为在angular中使用其他插件的最好方法是使用指令的形

  • Spring Boot+AngularJS+BootStrap实现进度条示例代码

    Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值.然后前台再每隔很小的一段时间去请求这个值. 在AngularJS中,$http对象有3种状态,分别是success,progress,error,其中progress方法就会在success方法调用之前(也就是上传完成之前),不断地调用.而我们要做的就是在progress中在添加一个请求,去后台拿我们设置在session

  • 详解在Angular项目中添加插件ng-bootstrap

    详解在Angular项目中添加插件ng-bootstrap

    npm 安装 ng-bootstrap 模块 npm install @ng-bootstrap/ng-bootstrap --save 在 Angular 项目配置 app.module.ts 添加 import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; imports: [ /** * ngx-bootstrap */ NgbModule.forRoot() ], 添加 bootstrap.min.css 样式 在 asset

  • angular4+百分比进度显示插件用法示例

    angular4+百分比进度显示插件用法示例

    本文实例讲述了angular4+百分比进度显示插件用法.分享给大家供大家参考,具体如下: 效果展示: 一.在npm社区中搜索 : ng-circle-progress 二.在项目目录下安装下载 npm install ng-circle-progress --save 三.在app.module.ts文件中导入NgCircleProgressModule模块, 并在@NgModule装饰器中使用NgCircleProgressModule.forRoot()的方法,里面的参数 是个对象字面量 N

  • Angular2整合其他插件的方法

    前言:现在有很多朋友在接触Angular2的时候,总是不可避免的会使用一些其他的第3方的插件,而这些插件可能都是基于jQuery的,而且也没有对应的angular2的版本,这里我就来讲解一下,在这种情况下,如何整合第3方的jQuery插件.我们以Angular2整合zTree为例来说明整合的思路及过程. zTree官方网站:http://www.treejs.cn/v3/main.php#_zTreeInfo 1.一般我在想要将像zTree这种插件集成进来的时候,我会先直接去看zTree它们的在

  • Angular实现的进度条功能示例

    本文实例讲述了Angular实现的进度条功能.分享给大家供大家参考,具体如下: 项目里需要一个进度条,所以就在网上查找资料学习,看到了网友"雪狼"的代码分享,写的很高明,很精练,很厉害,原文中的代码如下: HTML部分: <div ng-class="{progress: true, 'progress-striped': vm.striped}"> <div ng-class="['progress-bar', vm.style]&qu

  • Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    前言 本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: npm 安装 ngx-translate 模块 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 在 Angular 项目配置 app.module.ts 添加 import { TranslateLoader, Tr

  • AngularJS实现进度条功能示例

    AngularJS实现进度条功能示例

    本文实例讲述了AngularJS实现进度条功能的方法.分享给大家供大家参考,具体如下: 一.功能描述: ① 通过select标签,可以为进度条选择不同的样式(颜色) ② 进度条的进度通过文本框里面的值改变(也可以快捷的选择几个特定的值) ③ 通过checkbox按钮,控制进度条上的文字是否显示 二.代码实现: <!DOCTYPE html> <html lang="en" ng-app='app'> <head> <meta charset=&

  • 如何在Angular2中使用jQuery及其插件的方法

    如何在Angular2中使用jQuery及其插件的方法

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考这篇文章:http://www.jb51.net/ar

  • 如何在AngularJs中调用第三方插件库

    在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库.我们不能散乱的在AngularJS中引入这些库,例如在controller中.那么应该怎么在Angular中使用第三方库呢? 如何使用? 很简单,给插件写一个directive. 在这里,我会使用一个简单的jquery插件Toolbar.js 的DEMO. 这是我们如何在jquery中创建一个tooltip的: <!-- Click this to see a toolbar --> <div id="

随机推荐