Angular5中調(diào)用第三方j(luò)s插件的方法

更新時間：2018年02月26日 15:31:46 作者：HuichaoYin

下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

話不多說直入主題，最常見的有三種方式來引用第三方插件，下面以jquery插件及基于JQuery的兩款插件：nicescroll和rangeSlider為例。

一、第一種方式：在.angular-cli.json文件中配置

步驟：

1.在項目根目錄.angular-cli.json文件中找到script字段，在數(shù)組中添加要引用的所有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方法中就能正常用上面的三款插件了

三種方式都介紹完了，下面來說說需要注意的事情，前兩種方式需要重啟服務(wù)才會有效果（我當(dāng)時用的ng serve，不重啟的話不起作用）；第三種方式無需重啟服務(wù)，直接就能看到效果。

真是吐血的教訓(xùn)，剛開始嘗試的前兩種方式，怎么著都不成功，最后第三種方式成功了，后來重啟了下服務(wù)，發(fā)現(xiàn)前兩種方式也成功了。

不知道為什么前兩種方式需要重啟服務(wù)，自我猜測下：也許是前兩種都是修改的app文件夾外面的文件，不會自動檢測和編譯，而第三種方式能檢測到。

不知猜的對不對，如果有大牛了解內(nèi)部原理，望不吝賜教。

以上這篇Angular5中調(diào)用第三方j(luò)s插件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過ng-Img-Crop實現(xiàn)頭像截取的示例，具有一定的參考價值，有興趣的可以了解一下
2017-08-08
詳解Angular Forms中自定義ngModel綁定值的方式
在Angular應(yīng)用中有兩種方式來實現(xiàn)表單綁定，但是對于一些特殊的表單控件沒法實現(xiàn)，這篇文章主要介紹了詳解Angular Forms中自定義ngModel綁定值的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
AngularJS頁面帶參跳轉(zhuǎn)及參數(shù)解析操作示例
這篇文章主要介紹了AngularJS頁面帶參跳轉(zhuǎn)及參數(shù)解析操作,結(jié)合具體實例形式分析了AngularJS使用URL傳遞參數(shù)及參數(shù)的接收、解析等相關(guān)操作技巧,需要的朋友可以參考下
2017-06-06
Angular8 Http攔截器簡單使用教程
這篇文章主要介紹了Angular8 Http攔截器簡單使用教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
AngularJS動態(tài)生成div的ID源碼解析
這篇文章主要介紹了基于AngularJS動態(tài)生成div的ID,本文介紹的非常詳細(xì)，具有參考借鑒價值，對angularjs動態(tài)生成div的id相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
Angular實現(xiàn)的table表格排序功能完整示例
這篇文章主要介紹了Angular實現(xiàn)的table表格排序功能,結(jié)合完整實例形式分析了AngularJS表格排序所涉及的事件響應(yīng)、元素遍歷、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了angularjs點擊圖片放大實現(xiàn)上傳圖片預(yù)覽的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
AngularJS基礎(chǔ) ng-mouseleave 指令詳解
本文主要介紹AngularJS ng-mouseleave 指令,這里幫大家整理了ng-mouseleave指令的詳細(xì)資料,并附有代碼示例,有需要的小伙伴可以參考下
2016-08-08
AngularJS自定義過濾器用法經(jīng)典實例總結(jié)
這篇文章主要介紹了AngularJS自定義過濾器用法,結(jié)合實例形式總結(jié)分析了AngularJS自定義過濾器進(jìn)行包含、替換、篩選、過濾、排序等操作相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下
2018-05-05