详解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获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
图解js图片轮播效果
2015/12/20 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
C#实现将一个字符转换为整数
2017/12/12 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python的Jenkins接口调用方式
2020/05/12 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
abstract是什么意思
2012/02/12 面试题
五年级科学教学反思
2014/02/05 职场文书
初中英语课后反思
2014/04/25 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript