欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 11:01:54
由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令!...

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

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