angular2封装组件(一)——引用js包
来源:互联网 发布:mysql区分大小写查询 编辑:程序博客网 时间:2024/05/22 17:31
问题: 怎么用好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"));看下篇封装图表中的问题
阅读全文
2 0
- angular2封装组件(一)——引用js包
- 《Angular2入门系列基础》——angular2组件入门(一)
- JS组件系列——封装自己的JS组件
- Angular2笔记(一)--组件及组件树
- JS组件系列——自己动手封装bootstrap-treegrid组件
- 【angular2】(2)angular2自定义组件示例
- js框架封装(一)——框架介绍
- Vue.js组件封装——下拉列表
- JS组件系列——封装自己的JS组件,你也可以
- JS组件系列——封装自己的JS组件,你也可以
- JS组件系列——封装自己的JS组件,你也可以
- Angular2教程(一)
- Angular2(一)--模块
- 小莫的成神之旅(一)原生js封装组件tooltip
- [Vue.js破浪]——单文件组件(一)
- JS组件封装
- js组件封装
- 《Angular2进阶系列实践》——(阅读理解)题型组件开发
- Win 下 Java 环境变量配置
- tp的复合查询
- Android 反编译 -smali语法
- 网络安全重点总结1
- TCP简单的通信
- angular2封装组件(一)——引用js包
- javascript中json、回调函数、匿名函数的一些测试
- 面向对象的六大原则解析
- cout.precision()的使用
- leetcode 357. Count Numbers with Unique Digits
- Fzu 2200 cleaning【环状Dp-----暴力枚举拆环】
- 最小二乘法
- 响铃:内容越发重要的时代,开放共享要成为智能电视的新玩法?
- echarts bar内tooltip的formatter回调参数params.seriesId中的’\0’问题以及stack的获取