Angular中引入第三方JS库

最近写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
  });
}

备注

很多库都是直接对DOM进行操作,这对于Angular这种虚拟Dom操作会导致绑定失效等各种异常问题,一般情况下不建议混编,尤其是大项目,到后期会出现各种折磨人的小问题.

更多Angular实战代码可以参考我的开源项目:

github: https://github.com/nl101531/IToolsHub

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

用 RxJS、RxWX 编写微信小程序

RxJS RxJS是微软推出的ReactiveX系列,符合纯函数特点的第三方开源库有非常著名underscore和lodash,以及更加强大的RxJS。它可以用...

4508
来自专栏Seebug漏洞平台

HCTF2017 部分 Web 出题思路详解

11月12日结束的HCTF2017,我总共出了其中4道题目,这4道题目涵盖了我这半年来接触的很多有趣的东西。下面就简单讲讲出题思路以及完整的Writeup。

3729
来自专栏carven

koa+socket.io尝试简单的web动作同步

尝试用过browser-sync辅助开发的前端同学,大概都会感到神奇:在多个端打开网页,网页的动作却是完全同步的。

1110
来自专栏我的博客

Dedecms普通模型入门教程

1. 默认模板设置 里面是default后面变量名字是cfg_df_style(在模版中使用方法是{dede:golbal.cfg_df_style/}获取的路...

3716
来自专栏web前端教室

1228-redux学习笔记(摘录) | WEB前端零基础课

今天的WEB零基础课的内容是Redux,它的思路比较“拧”,不怎么好理解,算是react里的一个难点。讲完之后,同学们纷纷表示没听懂, 这个东西只靠听,肯定是搞...

19810
来自专栏腾讯Bugly的专栏

基于 Webpack & Vue & Vue-Router 的 SPA 初体验

最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,angularjs 已成昨日黄花,reactjs 如日...

3905
来自专栏美团技术团队

Redux从设计到源码

本文主要讲述这三方面内容: Redux 背后的设计思想 源码分析以及自定义中间件 开发中的最佳实践 Redux背后的设计思想 在讲设计思想前,先简单讲下Red...

4186
来自专栏Java成神之路

js_调试_01_14 个你可能不知道的 JavaScript 调试技巧

了解你的工具在完成任务时有很重要的意义。 尽管 JavaScript 是出了名的难以调试,但是如果你掌握了一些小技巧,错误和 bug 解决起来就会快多了。

1193
来自专栏阿凯的Excel

文件读取功能(Pandas读书笔记7)

前言:废话 之前宝宝出生,然后又忙着考试。 虽然考试很简单,但是必须要一次过,所以沉浸在两本书的海洋之中,好在天道酬勤,分别以自己满意的分数(87、81)通过了...

4925
来自专栏数据星河

如何对第一个Vue.js组件进行单元测试 (下)

       让我们来写首个测试。我们首先需要使用shallowMount手动挂载我们的组件,并将其存储在我们将执行断言的变量中。我们还可以通过propsDat...

1660

扫码关注云+社区

领取腾讯云代金券