详解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 }）]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。