1. 程式人生 > >angular2封裝元件(一)——引用js包

angular2封裝元件(一)——引用js包

問題: 怎麼用好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"));
看下篇封裝圖表中的問題