详解angular2采用自定义指令（Directive）方式加载jquery插件

由于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
     })]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angular # directive # angularjs # directive加载jquery插件 # 基于Angular.js实现的触摸滑动动画实例代码 # 利用angularjs1.4制作的简易滑动门效果 # 详解angularJs中自定义directive的数据交互 # AngularJS中的Directive自定义一个表格 # Angularjs使用directive自定义指令实现attribute继承的方法详解 # Angularjs自定义指令Directive详解 # angularjs利用directive实现移动端自定义软键盘的示例 # Angular.js通过自定义指令directive实现滑块滑动效果 # 自定义 # 回调 # 才会 # 所需 # 在上 # 所需要 # 来完成 # 创建一个 # 大家多多 # 时需 # 结束时间 # master # bootstrap # selector # export # dateRangePicker # html

返回目录在线咨询

上一篇：婚姻网站制作书签怎么做,自从父母搬来以后家里鸡飞狗跳，为了保住我的婚姻，我该如何劝父母回老家？
下一篇：对于新手站长而言，如何快速上手管理托管后的网站服务器？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

详解angular2采用自定义指令（Directive）方式加载jquery插件

您的项目需求