详解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 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
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简单实现加减乘除计算器
2014/01/06 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
JS解析XML实例分析
2015/01/30 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
JavaScript实现多个物体同时运动
2020/03/12 Javascript
js实现3D旋转效果
2020/08/18 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
大学生自我鉴定
2013/12/16 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
助理政工师申报材料
2014/06/03 职场文书
战友聚会策划方案
2014/06/13 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
小学假期安全广播稿
2014/09/28 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书