由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目,

那么如何把jquery插件放到angular2中呢?采用自定义指令!

在上下文之前要引入jquery,这点不再描述

首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数。

在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件,

初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素

这里需要讲一下,jquery中回调函数,如果直接使用this,回调是无法获取angular的函数的

所以这里采用bind的形式,把this传递进去。这样在angular中的函数才会被正确调用。

以下为实现时间插件的代码:

  1. import { Directive, Output, Input, ElementRef, EventEmitter } from '@angular/core';
  2.  
  3. // 引入jquery.daterangepicker插件相关JS和css,Css打包时需要打包成单个文件,或者直接在html单独引用
    // 如何单独打包请看下节代码
  4. require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.js');
  5. require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.css');
  6.  
  7. // 自定义指令
  8. @Directive({
  9. selector: '[dateRangePicker]',
  10. })
  11.  
  12. export class DateRangePicker {
  13.  
  14. /**
  15. * jquery.daterangepicker插件所需的参数
  16. * 参数:http://www.daterangepicker.com/#options
  17. */
  18. @Input() public dateRangePickerOptions: IJQueryDateRangePicker;
  19.  
  20. // 选中事件
  21. @Output() selected: any = new EventEmitter();
  22.  
  23. /**
  24. * 初始化
  25. * @param _elementRef
  26. */
  27. constructor(private _elementRef: ElementRef) {
  28. }
  29.  
  30. /**
  31. * 属性发生更改时
  32. * @private
  33. */
  34. ngOnChanges() {
  35. $(this._elementRef.nativeElement).daterangepicker(this.dateRangePickerOptions, this.dateCallback.bind(this));
  36. }
  37.  
  38. /**
  39. * 时间发生更改时使用emit传递事件
  40. * @private
  41. */
  42. dateCallback(start, end) {
  43. let format = "YYYY-MM-DD";
  44. if (this.dateRangePickerOptions.locale.format) {
  45. format = this.dateRangePickerOptions.locale.format;
  46. }
  47. let date = {
  48. startDate: start.format(format),
  49. endDate: end.format(format),
  50. }
  51.  
  52. this.selected.emit(date);
  53. }
  54.  
  55. }
  1. import { Component } from '@angular/core';
  2. import { DateRangePicker } from '../../theme/directives';
  3.  
  4. @Component({
  5. selector: 'dashboard',
  6. template: `
  7. <div class="form-group">
  8. <label for="startDate">{date.startDate}</label>
  9. <input
  10. dateRangePicker
  11. [dateRangePickerOptions]="option"
  12. (selected)="dateSelected($event)"
  13. type="text"
  14. class="form-control">
  15. </div>
  16. `,
  17. directives: [DateRangePicker]
  18. })
  19. export class Dashboard {
  20.  
  21. /**
  22. * 当前选中的时间
  23. */
  24. public date: any
  25.  
  26. /**
  27. * jquery时间插件参数
  28. */
  29. private option: Object = {
  30. locale: {
  31. format: "YYYY-MM-DD",
  32. separator: " 至 ",
  33. applyLabel: "确定",
  34. cancelLabel: '取消',
  35. fromLabel: '起始时间',
  36. toLabel: '结束时间',
  37. customRangeLabel: '自定义',
  38. daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
  39. monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
  40. '七月', '八月', '九月', '十月', '十一月', '十二月'],
  41. firstDay: 1
  42. },
  43. };
  44.  
  45. constructor() {
  46. }
  47.  
  48. /**
  49. * emit回调事件,获取选中时间
  50. * @param date
  51. */
  52. dateSelected(date) {
  53. this.date = date;
  54. }
  55. }

另外注意,css需要另外单独打包,或html单独引用,如何打包css,请看最后,我这里是用webpack打包的

  1. // 采用ExtractTextPlugin单独对jquery插件进行css打包
  2. loaders: [{
  3. test: /daterangepicker\.css$/,
  4. loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
  5. }]
  6.  
  7. plugins: [
  8. new ExtractTextPlugin('[name].css', {
  9. allChunks: true
  10. })]

angular2采用自定义指令(Directive)方式加载jquery插件的更多相关文章

  1. 加载jquery插件注意了

    1.尽量放在</body>之前,不要放在</head>标签之前,如果执意要放也要放在css之后,例如: <link href="style.css" ...

  2. seajs加载jquery插件

    假设有如下一个名为get-data的jq插件: (function($) { $.fn.getData= function() { console.log($(this).attr('data')) ...

  3. vue动态加载jQuery插件

    要先npm安装jQuery插件哦 window.$=$; window.jQuery=$; function loadJs(Url,callback){ var Nscript=document.cr ...

  4. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  5. Android批量图片加载经典系列——采用二级缓存、异步加载网络图片

    一.问题描述 Android应用中经常涉及从网络中加载大量图片,为提升加载速度和效率,减少网络流量都会采用二级缓存和异步加载机制,所谓二级缓存就是通过先从内存中获取.再从文件中获取,最后才会访问网络. ...

  6. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  7. 基于TFTP方式加载启动Linux内核

            一.软硬件平台 1.开发板:创龙AM3359核心板,网口采用RMII形式. 2.UBOOT版本:U-Boot-2016.05,采用FDT和DM. 3.交换芯片MARVELL的88E63 ...

  8. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  9. 6_1 持久化模型与再次加载_探讨(1)_三种持久化模型加载方式以及import_meta_graph方式加载持久化模型会存在的变量管理命名混淆的问题

    笔者提交到gitHub上的问题描述地址是:https://github.com/tensorflow/tensorflow/issues/20140 三种持久化模型加载方式的一个小结论 加载持久化模型 ...

随机推荐

  1. xcode7--iOS开发---将app打包发布至app store

    时隔3个月再次接触应用打包,又是一顿折腾 说说这次的感受吧: 变得是打包时间减少到4小时(其中大部分时间还是xcode7或者是iOS9的原因),不变的是还是一如既往的坑!! 好了,废话不多说,下面讲讲 ...

  2. C++ vector用法积累

    1. vector的初始化 2. vector基本操作 2.1 vector属性 size resize 2.2 vector操作 插入 在最后插入一个元素 push_back() 删除 在最后删除一 ...

  3. 二进制部署etcd集群

    kuberntes 系统使用 etcd 存储所有数据,本文档介绍部署一个三节点高可用 etcd 集群的步骤,这三个节点配置复用 ,我在这里没有做认证,如果有需要也可以做. 下载二进制文件 到 http ...

  4. 配置p6spyLog输出sql完整日志

      第一步:   配置maven <dependency> <groupid>p6spy</groupid> <artifactid>p6spy< ...

  5. Spring笔记2

    Bean生命周期 1 实例化 2 注入属性 3 BeanNameAware 4 BeanFactoryAware 5 ApplicationContextAware 6 BeanPostProcess ...

  6. Trie(字典树,前缀树)_模板

    Trie Trie,又经常叫前缀树,字典树等等. Trie,又称前缀树或字典树,用于保存关联数组,其中的键通常是字符串.与二叉查找树不同,键不是直接保存在节点中,而是由节点在树中的位置决定.一个节点的 ...

  7. IT类职位常用缩写 SA SD RD PG PM DBA MIS QA Sales

    身为IT民工的基本常识,IT类职位常用缩写 SA (System Analyst) 系统分析师 在软体开发团队中,属于中高阶的基层管理者与领导者.除了须具备优秀的文字.语言沟通能力之外,还要有良好的分 ...

  8. Python自动化运维——系统性能信息模块

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:psutil psutil是一个跨平台库,可以很轻松的为我们实现获取系统运行的进程和资源利用率等信息. 功能 ...

  9. python2.7练习小例子(二十)

        20):题目:猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上 ...

  10. 图片验证码给AI使用

    为了破解图形验证码,AI需要大量的图片数据.为了简单获取大量的图形来喂给Ai模型训练,索性自己写一把.代码来一发..   import java.awt.Color; import java.awt. ...