详解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 select下拉框操作的一些说明
Apr 02 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
vue-dialog的弹出层组件
May 25 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 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
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php中final关键字用法分析
2016/12/07 PHP
Opacity.js
2007/01/22 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python之Socket网络编程详解
2016/09/29 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python中安装django模块的方法
2020/03/12 Python
工艺员岗位职责
2014/02/11 职场文书
经理助理岗位职责
2014/03/05 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
给老婆的检讨书
2015/01/27 职场文书
支教个人总结
2015/03/04 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
民事调解协议书
2016/03/21 职场文书