详解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]',
})
exportclassDateRangePicker{
/**
*jquery.daterangepicker插件所需的参数
*参数:http://www.daterangepicker.com/#options
*/
@Input()publicdateRangePickerOptions:IJQueryDateRangePicker;
//选中事件
@Output()selected:any=newEventEmitter();
/**
*初始化
*@param_elementRef
*/
constructor(private_elementRef:ElementRef){
}
/**
*属性发生更改时
*@private
*/
ngOnChanges(){
$(this._elementRef.nativeElement).daterangepicker(this.dateRangePickerOptions,this.dateCallback.bind(this));
}
/**
*时间发生更改时使用emit传递事件
*@private
*/
dateCallback(start,end){
letformat="YYYY-MM-DD";
if(this.dateRangePickerOptions.locale.format){
format=this.dateRangePickerOptions.locale.format;
}
letdate={
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:`
<divclass="form-group">
<labelfor="startDate">{date.startDate}</label>
<input
dateRangePicker
[dateRangePickerOptions]="option"
(selected)="dateSelected($event)"
type="text"
class="form-control">
</div>
`,
directives:[DateRangePicker]
})
exportclassDashboard{
/**
*当前选中的时间
*/
publicdate:any
/**
*jquery时间插件参数
*/
privateoption:Object={
locale:{
format:"YYYY-MM-DD",
separator:"至",
applyLabel:"确定",
cancelLabel:'取消',
fromLabel:'起始时间',
toLabel:'结束时间',
customRangeLabel:'自定义',
daysOfWeek:['日','一','二','三','四','五','六'],
monthNames:['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
firstDay:1
},
};
constructor(){
}
/**
*emit回调事件，获取选中时间
*@paramdate
*/
dateSelected(date){
this.date=date;
}
}
另外注意，css需要另外单独打包，或html单独引用，如何打包css，请看最后，我这里是用webpack打包的
//采用ExtractTextPlugin单独对jquery插件进行css打包
loaders:[{
test:/daterangepicker\.css$/,
loader:ExtractTextPlugin.extract('style-loader','css-loader')
}]
plugins:[
newExtractTextPlugin('[name].css',{
allChunks:true
})]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。