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