详解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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
js实现按座位号抽奖
Apr 05 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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
对盗链说再见...
2006/10/09 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python实现杨辉三角思路
2017/07/14 Python
Php多进程实现代码
2018/05/07 Python
python分布式计算dispy的使用详解
2019/12/22 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
武汉东之林科技有限公司机试
2013/09/17 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
2014年计生标语
2014/06/23 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
盲山观后感
2015/06/11 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python