当前位置是:帝豪2娱乐 > 服务内容 > 服务内容

详解angular2采用自定义指令(Directive)方式加载

来源:wehoppe.com 作者:员农 发布时间:2018-01-09 点击量:

  

[angular,directive,angularjs,directive加载jquery插件]详解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插件所需的参数  * 参数:  */  @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: `  
      
  `,  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  })]  
  
  

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

  




上一篇:帝豪娱乐注册:苹果本周二宣布开放旗下的新闻聚

下一篇:没有了