Angular中引入第三方JS库

屈定

发布于 2018-09-27 03:50:25

6.2K00

代码可运行

运行总次数：0

代码可运行

最近写http://www.itoolshub.com/的时候用到了日期时间选择器,Angular本身material2只有日期选择器,也不知道为什么官方不提供日期时间选择器,也可能是Angular2以及如今的4有些年轻,很多库都不是很成熟,于是乎搜索到的解决方案就是借助第三方的库来使用一些优秀的组件.本文以https://github.com/sentsin/laydate组件为例.

引入js与css

https://github.com/sentsin/laydate是采用原生js实现的组件,因此不需要考虑相关依赖,直接入手. 1.使用npm下载该组件npm install layui-laydate -save 2.在.angular-cli.json文件中配置

"styles": [
     "styles.scss",
     "../node_modules/layui-laydate/dist/theme/default/laydate.css"
   ],
   "scripts": [
     "../node_modules/layui-laydate/dist/laydate.js"
   ],

Angular在编译的时候会把上述的js引用都打包到scripts.bundle.js文件中

ts编译识别laydate

第一步完成后如果在TS中使用laydate变量,编译器是会直接报错的,因为其找不到这个变量,因此这一步要做的就是让ts识别该变量.做法很简单,在typings.d.ts中加入声明

/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
  id: string;
}
// laydate声明
declare var laydate: any;

使用laydate功能

laydate是需要更改Dom节点的,因此该步骤必须放到Angular对视图渲染之后,也就是生命周期中的AfterViewInit函数中执行.另外该渲染会使得双向绑定失效,需要处理结果则可以在laydate的回调函数中处理. 另外使用的时候就可以按照ts的语法来使用了,最终都会解析成原生js.比如下方的箭头函数.

ngAfterViewInit(): void {
  let done = (value, date, endDate) =>{
    let selectTime = new Date(value);
    this.timeStampOut = selectTime.getTime() / 1000;
    this.timeStampWeek = TimestampComponent.WEEKS[selectTime.getDay()] == null ? "Invalid Week": TimestampComponent.WEEKS[selectTime.getDay()]
  };
  laydate.render({
    elem: '#layerdate',
    type: 'datetime',
    change: done,
    done: done
  });
}