招聘微信小程序系统_详解angular2选用自界说指令

2021-01-12 14:20 admin
详解angular2采用自定义指令(Directive)方式加载jquery插件       本篇文章主要介绍了详解angular2采用自定义指令(Directive)方式加载jquery插件 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目,

那么如何把jquery插件放到angular2中呢?采用自定义指令!

在上下文之前要引入jquery,这点不再描述

首先创建一个指令,。

在ngOnChanges时,,

初始化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插件所需的参数
 * 参数:#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';
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

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