详解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 })]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。