由于angular2興起不久，相關(guān)插件還是很少，所以有時(shí)候不得不用一些jquery插件來完成項(xiàng)目，
成都創(chuàng)新互聯(lián)公司成立于2013年，先為寶坻等服務(wù)建站，寶坻等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為寶坻企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
那么如何把jquery插件放到angular2中呢？采用自定義指令！
在上下文之前要引入jquery，這點(diǎn)不再描述
首先創(chuàng)建一個(gè)指令，采用@input方式，來獲取jquery插件所需要的參數(shù)。
在ngOnChanges時(shí)，也就是參數(shù)通過@input傳入時(shí)，初始化jquery插件，
初始化jquery插件需要獲取dom元素，所以我們引入ElementRef，用來獲取dom元素
這里需要講一下，jquery中回調(diào)函數(shù)，如果直接使用this,回調(diào)是無法獲取angular的函數(shù)的
所以這里采用bind的形式，把this傳遞進(jìn)去。這樣在angular中的函數(shù)才會(huì)被正確調(diào)用。
以下為實(shí)現(xiàn)時(shí)間插件的代碼：
重慶分公司
重慶分公司
import { Directive, Output, Input, ElementRef, EventEmitter } from '@angular/core';
// 引入jquery.daterangepicker插件相關(guān)JS和css,Css打包時(shí)需要打包成單個(gè)文件，或者直接在html單獨(dú)引用
// 如何單獨(dú)打包請看下節(jié)代碼
require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.js');
require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.css');
// 自定義指令
@Directive({
selector: '[dateRangePicker]',
})
export class DateRangePicker {
/**
* jquery.daterangepicker插件所需的參數(shù)
* 參數(shù):http://www.daterangepicker.com/#options
*/
@Input() public dateRangePickerOptions: IJQueryDateRangePicker;
// 選中事件
@Output() selected: any = new EventEmitter();
/**
* 初始化
* @param _elementRef
*/
constructor(private _elementRef: ElementRef) {
}
/**
* 屬性發(fā)生更改時(shí)
* @private
*/
ngOnChanges() {
$(this._elementRef.nativeElement).daterangepicker(this.dateRangePickerOptions, this.dateCallback.bind(this));
}
/**
* 時(shí)間發(fā)生更改時(shí)使用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: `
`,
directives: [DateRangePicker]
})
export class Dashboard {
/**
* 當(dāng)前選中的時(shí)間
*/
public date: any
/**
* jquery時(shí)間插件參數(shù)
*/
private option: Object = {
locale: {
format: "YYYY-MM-DD",
separator: " 至 ",
applyLabel: "確定",
cancelLabel: '取消',
fromLabel: '起始時(shí)間',
toLabel: '結(jié)束時(shí)間',
customRangeLabel: '自定義',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
firstDay: 1
},
};
constructor() {
}
/**
* emit回調(diào)事件，獲取選中時(shí)間
* @param date
*/
dateSelected(date) {
this.date = date;
}
}
另外注意，css需要另外單獨(dú)打包，或html單獨(dú)引用，如何打包c(diǎn)ss，請看最后，我這里是用webpack打包的
// 采用ExtractTextPlugin單獨(dú)對jquery插件進(jìn)行css打包
loaders: [{
test: /daterangepicker\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}]
plugins: [
new ExtractTextPlugin('[name].css', {
allChunks: true
})]
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
