angular2封装组件（一）——引用js包

发布时间：2020-12-17 09:13:01 所属栏目：安全来源：网络整理

导读：问题：怎么用好js的包答案：尽量找那种对外提供了对象的js包，比如 JQuery包，提供了$对象，swiper包，提供了swiper对象。还有 ztree包，echarts包，尽量找有官方文档的js包，使用起来特别的爽。毕竟强大。别人验证了可行。在angular2的世界里，还是脱

问题：怎么用好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"));

看下篇封装图表中的问题

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!