那么如何把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插件所需的参数 * 参数:#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> <label for="startDate">{date.startDate}</label> <input dateRangePicker [dateRangePickerOptions]="option" (selected)="dateSelected($event)" type="text"> </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 })]