詳解angular2采用自定義指令（Directive）方式加載jquery插件

更新時(shí)間：2017年02月09日 16:01:49 作者：Liuyt

本篇文章主要介紹了詳解angular2采用自定義指令（Directive）方式加載jquery插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

由于angular2興起不久，相關(guān)插件還是很少，所以有時(shí)候不得不用一些jquery插件來完成項(xiàng)目，

那么如何把jquery插件放到angular2中呢？采用自定義指令！

在上下文之前要引入jquery，這點(diǎn)不再描述

首先創(chuàng)建一個(gè)指令，采用@input方式，來獲取jquery插件所需要的參數(shù)。

在ngOnChanges時(shí)，也就是參數(shù)通過@input傳入時(shí)，初始化jquery插件，

初始化jquery插件需要獲取dom元素，所以我們引入ElementRef，用來獲取dom元素

這里需要講一下，jquery中回調(diào)函數(shù)，如果直接使用this,回調(diào)是無法獲取angular的函數(shù)的

所以這里采用bind的形式，把this傳遞進(jìn)去。這樣在angular中的函數(shù)才會(huì)被正確調(diào)用。

以下為實(shí)現(xiàn)時(shí)間插件的代碼：

import { Directive, Output, Input, ElementRef, EventEmitter } from '@angular/core';

// 引入jquery.daterangepicker插件相關(guān)JS和css,Css打包時(shí)需要打包成單個(gè)文件，或者直接在html單獨(dú)引用
// 如何單獨(dú)打包請(qǐng)看下節(jié)代碼

require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.js');
require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.css');

// 自定義指令
@Directive({
 selector: '[dateRangePicker]',
})

export class DateRangePicker {

 /**
  * jquery.daterangepicker插件所需的參數(shù)
  * 參數(shù):http://www.daterangepicker.com/#options
  */
 @Input() public dateRangePickerOptions: IJQueryDateRangePicker;

 // 選中事件
 @Output() selected: any = new EventEmitter();

 /**
  * 初始化
  * @param _elementRef
  */
 constructor(private _elementRef: ElementRef) {
 }

 /**
  * 屬性發(fā)生更改時(shí)
  * @private
  */
 ngOnChanges() {
  $(this._elementRef.nativeElement).daterangepicker(this.dateRangePickerOptions, this.dateCallback.bind(this));
 }

 /**
  * 時(shí)間發(fā)生更改時(shí)使用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 {

 /**
  * 當(dāng)前選中的時(shí)間
  */
 public date: any

 /**
  * jquery時(shí)間插件參數(shù)
  */
 private option: Object = {
  locale: {
   format: "YYYY-MM-DD",
   separator: " 至 ",
   applyLabel: "確定",
   cancelLabel: '取消',
   fromLabel: '起始時(shí)間',
   toLabel: '結(jié)束時(shí)間',
   customRangeLabel: '自定義',
   daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
   monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月'],
   firstDay: 1
  },
 };

 constructor() {
 }

 /**
  * emit回調(diào)事件，獲取選中時(shí)間
  * @param date
  */
 dateSelected(date) {
  this.date = date;
 }
}

另外注意，css需要另外單獨(dú)打包，或html單獨(dú)引用，如何打包c(diǎn)ss，請(qǐng)看最后，我這里是用webpack打包的

// 采用ExtractTextPlugin單獨(dú)對(duì)jquery插件進(jìn)行css打包
loaders: [{
    test: /daterangepicker\.css$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
   }]

plugins: [
     new ExtractTextPlugin('[name].css', {
      allChunks: true
     })]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: