网上找了很多教材都搜索不到该部分类型,自己测试了下写了该教程。


场景说明:项目需要使用bootstrap,众所周知bootstrap没有时间日期控件的,需要使用第三方控件,我对如何在angular2中使用第三方控件比较恐慌,我项目使用angular-cli构建的。

解决流程
1:配置package.json添加新的依赖,然后进行update,下载新的库
  1. "jquery":"*",
  2. "tether":"*",
  3. "bootstrap":"*",
  4. "moment":"*",
  5. "eonasdan-bootstrap-datetimepicker":"*"
2:  配置angular-cli.json
  1. "styles": [
  2. "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  3. "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
  4. "styles.css"
  5. ],
  6. "scripts": [
  7. "../node_modules/jquery/dist/jquery.min.js",
  8. "../node_modules/tether/dist/js/tether.min.js",
  9. "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  10. "../node_modules/moment/min/moment.min.js",
  11. "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
  12. ],
3: 在模版中使用datatimepicker插件
  1. <div class="container">
  2. <div class="row">
  3. <div class='col-sm-6'>
  4. <div class="form-group">
  5. <div class='input-group date' id='datetimepicker1'>
  6. <input type='text' class="form-control" />
  7. <span class="input-group-addon">
  8. <span class="glyphicon glyphicon-calendar"></span>
  9. </span>
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. </div>
4:在组件中对该组件进行实例化
  1. declare var $:any;
  2. @Component({
  3. selector:"app-root",
  4. templateUrl:"bootstrap.template.html"
  5. })
  6. export class BootstrapComponent extends OnInit{
  7. ngOnInit(): void {
  8. $(function () {
  9. $('#datetimepicker1').datetimepicker();
  10. });
  11. }
  12. }
这里注意需要声明$变量,如果你使用jquery那么声明jquery变量,如果不声明,console会有提示错误,这里的声明为什么会起作用我具体也不是很清楚,也许类似d.ts的作用吧。

angular2怎么使用第三方的库(jquery等)的更多相关文章

  1. 开源框架】Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发

    [原][开源框架]Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位... 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言 原文  http: ...

  2. 粉笔网iPhone端使用的第三方开源库

    粉笔网iPhone端使用的第三方开源库 前言 最近有朋友问我粉笔网 iPhone 端使用了哪些第三方的开源库.我在这儿整理了一下,分享给大家. ASIHttpRequest ASIHttpReques ...

  3. Android 第三方开源库收集整理(转)

    原文地址:http://blog.csdn.net/caoyouxing/article/details/42418591 Android开源库 自己一直很喜欢Android开发,就如博客签名一样,  ...

  4. 45.Android 第三方开源库收集整理(转)

    原文地址:http://blog.csdn.net/caoyouxing/article/details/42418591 Android开源库 自己一直很喜欢Android开发,就如博客签名一样,  ...

  5. 【开源框架】Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位网友补充完善

    链接地址:http://www.tuicool.com/articles/jyA3MrU 时间 2015-01-05 10:08:18  我是程序猿,我为自己代言 原文  http://blog.cs ...

  6. 如何在 FineUIMvc 中引用第三方 JavaScript 库

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 引入第三方颜色选择器 在 FineUIMvc 中使用第三方 JavaScript 遵循一定的约定,也非常简单. 下面以官网示例为 ...

  7. webpack4 系列教程(十二):处理第三方JavaScript库

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十二):处理第三方 JavaScript 库>原文地址.或者来我的小站看更多内容:godbm ...

  8. Android之史上最全最简单最有用的第三方开源库收集整理

    Android开源库 自己一直很喜欢Android开发,就如博客签名一样, 我是程序猿,我为自己代言 . 在摸索过程中,GitHub上搜集了很多很棒的Android第三方库,推荐给在苦苦寻找的开发者, ...

  9. 第三方开源库和jar包的区别

    jar包和第三方开源库的根本区别在于,开源库的功能比jar包功能更强大,通过引入库项目可以访问java文件以及该开源库项目下的资源文件,例如图片,layout等文件 jar包中只能放class文件 引 ...

随机推荐

  1. js实现倒计时 类似团购网站

    一.demo与效果展示 为节约时间,我就直接套用了企鹅团的界面作为demo的背景.因为是倒计时,所以需要一个固定的时间,为了n年后,某位仁兄打开demo页面依然在倒计时,所以我把倒计时时间设成了205 ...

  2. text/html与text/plain有什么区别?

    MIME是服务器通知客户机传送文件是什么类型的主要方法,客户机浏览器也通过MIME告诉服务器它的参数. 在网上,如果接收到的文件没有MIME头,就默认它为HTML格式.但这样也不好,因为当MIME的包 ...

  3. ZooKeeper学习第三期---Zookeeper命令操作

    一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他们大多数是查询命令,用来获取Zookeeper服务的当前状态及相关信息.用户在客户端可以通过telnet或n ...

  4. JS结合DOM事件的例子

    // 这是初始文字 右边是一个测试文本框: 鼠标划过.点击.松开上面的文字都会有不同的效果,鼠标光标移到.离开文本框也会有不同的效果. 首先新建一个html文件 <!DOCTYPE html&g ...

  5. Linux基础入门(20135207 王国伊)

    实验一  Linux系统简介 一.实验心得 首个实验是简单介绍了Linux系统的简介,了解Linux系统的历史和发展.使我受益匪浅 实验二  基本概念及操作 一.学习目标 1.实验楼环境介绍 2.常用 ...

  6. Arduino智能小车实践学习报告

    Arduino智能小车实践学习报告 参与人员: 20135316 王剑桥 20135312 吴汉彦 20135319 朱锂 一. 背景了解: 单片机:将中央处理单元CPU(进行运算.控制).随机存储器 ...

  7. 20145208 《Java程序设计》第8周学习总结

    20145208 <Java程序设计>第8周学习总结 教材学习内容总结 NIO与NIO2 NIO与IO的区别 IO           NIO 面向流             面向缓冲 阻 ...

  8. 腾讯的一个移动端测试小工具GT

    上周末参加了Ministar北京的测试聚会.腾讯的MIG专项测试组的组长给大家介绍了他们最近开发出来的手机测试工具GT. 下面是GT的官方说明: GT(随身调)是APP的随身调测平台,它是直接运行在手 ...

  9. 深入探索Android中的Handler

    一.概述 1. 什么是Handler Handler是Android消息机制的上层接口,它为我们封装了许多底层的细节,让我们能够很方便的使用底层的消息机制.Handler的最常见应用场景之一便是通过H ...

  10. EF实体框架之CodeFirst五

    上一博客学习了下基本的约定配置,留下几个遗漏的,这篇就是学习下遗漏一复杂类型. 一.什么是复杂类型? 书中说道:“复杂类型也可视作值类型(?)可以作为附加属性添加到其他类.复杂类型与实体类型的区别在于 ...