angular2封裝元件(一)——引用js包
阿新 • • 發佈:2019-02-12
問題: 怎麼用好js的包
答案:儘量找那種對外提供了物件的js包,比如 JQuery包,提供了$物件,swiper包,提供了swiper物件。還有 ztree包,echarts包,
儘量找有 官方文件的js包,使用起來特別的爽。畢竟強大。別人驗證了可行。
在angular2的世界裡,還是脫離不了js的因為好多的外掛都是js寫的,需要引入不少的js檔案。先說怎麼引用JQuery。
由於angular2是基於ts的寫法,所以對於JQuery中的$是一定要宣告的。請在專案中的 src/typings.d.ts檔案中宣告。沒有typings.d.ts就手動建立一個。
declare var JQuery: any; declare var jQuery: any; declare var $: any;
如果此時用到了$變數是直接報 $是undefined的。因為$並沒有關聯到JQuery。有兩種方式可以關聯JQuery,兩種方式只能取一種。
第一種直接在index.html引入 JQuery的包,我使用的是 jquery/2.1.1/jquery.min.js
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
第二種是在 angular-cli.json檔案中加上自己的JQuery.min.js
"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jquery-ui-dist/jquery-ui.min.js", "assets/bootstrap.min.js" ],
對於引入js還有其他的引用方式,如果使用的外掛有提供給angular2的外掛包,那麼可以採用如下的方式。舉例:圖表外掛 echarts來說明
只需要元件的import區域引入echarts包就可以,當然你得提前cnpm install echarts
import * as echarts from 'echarts';
順便說下 echarts怎麼在元件裡初始化,chart是自己命名的any變數。html模板檔案有個 id為main的div,重要的事情說三遍,這個main的div一定要有高度和寬度,這個main的div一定要有高度和寬度,這個main的div一定要有高度和寬度
看下篇封裝圖表中的問題this.chart=echarts.init(document.getElementById("main"));