帝王谷资源网 Design By www.wdxyy.com
由于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 })]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月28日
2024年10月28日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]