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

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; }}

// 采用ExtractTextPlugin单独对jquery插件进行css打包loaders: [{    test: /daterangepicker/.css$/,    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')   }]plugins: [     new ExtractTextPlugin('[name].css', {      allChunks: true     })]