详解angular2采用自定义指令(Directive)方式加载jquery插件


Posted in Javascript onFebruary 09, 2017

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

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

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

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

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

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

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

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

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

import { Directive, Output, Input, ElementRef, EventEmitter } from '@angular/core';

// 引入jquery.daterangepicker插件相关JS和css,Css打包时需要打包成单个文件,或者直接在html单独引用
// 如何单独打包请看下节代码

require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.js');
require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.css');

// 自定义指令
@Directive({
 selector: '[dateRangePicker]',
})

export class DateRangePicker {

 /**
  * jquery.daterangepicker插件所需的参数
  * 参数:http://www.daterangepicker.com/#options
  */
 @Input() public dateRangePickerOptions: IJQueryDateRangePicker;

 // 选中事件
 @Output() selected: any = new EventEmitter();

 /**
  * 初始化
  * @param _elementRef
  */
 constructor(private _elementRef: ElementRef) {
 }

 /**
  * 属性发生更改时
  * @private
  */
 ngOnChanges() {
  $(this._elementRef.nativeElement).daterangepicker(this.dateRangePickerOptions, this.dateCallback.bind(this));
 }

 /**
  * 时间发生更改时使用emit传递事件
  * @private
  */
 dateCallback(start, end) {
  let format = "YYYY-MM-DD";
  if (this.dateRangePickerOptions.locale.format) {
   format = this.dateRangePickerOptions.locale.format;
  }
  let date = {
   startDate: start.format(format),
   endDate: end.format(format),
  }

  this.selected.emit(date);
 }

}
import { Component } from '@angular/core';
import { DateRangePicker } from '../../theme/directives';


@Component({
 selector: 'dashboard',
 template: `
   <div class="form-group">
        <label for="startDate">{date.startDate}</label>
        <input 
        dateRangePicker 
        [dateRangePickerOptions]="option"    
        (selected)="dateSelected($event)" 
        type="text" 
        class="form-control">
   </div>
 `,
 directives: [DateRangePicker]
})
export class Dashboard {

 /**
  * 当前选中的时间
  */
 public date: any

 /**
  * jquery时间插件参数
  */
 private option: Object = {
  locale: {
   format: "YYYY-MM-DD",
   separator: " 至 ",
   applyLabel: "确定",
   cancelLabel: '取消',
   fromLabel: '起始时间',
   toLabel: '结束时间',
   customRangeLabel: '自定义',
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'],
   firstDay: 1
  },
 };

 constructor() {
 }

 /**
  * emit回调事件,获取选中时间
  * @param date
  */
 dateSelected(date) {
  this.date = date;
 }
}

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

// 采用ExtractTextPlugin单独对jquery插件进行css打包
loaders: [{
    test: /daterangepicker\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
   }]

plugins: [
     new ExtractTextPlugin('[name].css', {
      allChunks: true
     })]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery滚动加载图片效果的实现
Mar 06 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
微信开发 微信授权详解
Oct 21 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
vue-router跳转页面的方法
Feb 09 #Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 #Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 #Javascript
js 数据存储和DOM编程
Feb 09 #Javascript
超全面的javascript中变量命名规则
Feb 09 #Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 #Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 #Javascript
You might like
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
遗体告别仪式答谢词
2014/01/23 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
创建文明城市标语
2014/06/16 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Oracle中update和select 关联操作
2022/01/18 Oracle
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python