由于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 })]以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
