详解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写法
Sep 15 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
js实现验证码干扰(动态)
Feb 23 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 中使用随机数的三个步骤
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python机器学习库常用汇总
2017/11/15 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
python实现简单的tcp 文件下载
2020/09/16 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
Python爬取某平台短视频的方法
2021/02/08 Python
母亲节感恩活动记录
2014/03/16 职场文书
社会调查研究计划书
2014/05/01 职场文书
爱国演讲稿400字
2014/05/07 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
优秀党支部申报材料
2014/12/24 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL