• 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插件所需的参数 * 参数: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
             })]
  • 相关阅读:
    Pytorch-实战之对Himmelblau函数的优化
    Pytorch-tensor的感知机,链式法则
    Pytorch-tensor的激活函数
    Pytorch-tensor的分割,属性统计
    Pytorch-tensor的转置,运算
    Pytorch-tensor维度的扩展,挤压,扩张
    Transformer代码细节
    Leetcode 1494
    格雷码
    两个正序数组的中位数
  • 原文地址:https://www.cnblogs.com/liuyt/p/5810100.html
Copyright © 2020-2023  润新知