详解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.fn.extend与jquery.extend
Nov 21 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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/12/23 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
document.compatMode介绍
2009/05/21 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
django中的图片验证码功能
2019/09/18 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Django中的session用法详解
2020/03/09 Python
python程序需要编译吗
2020/06/19 Python
利用python 下载bilibili视频
2020/11/13 Python
EJB发布WEB服务一般步骤
2012/10/31 面试题
金融管理应届生求职信
2014/02/20 职场文书
幼儿园秋游感想
2014/03/12 职场文书
文明生主要事迹
2014/05/25 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
公司开业主持词
2015/07/02 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python