Angular2中的JQuery UI Datepicker

Question

我是 Angular2 的新手。
我正在尝试在 angular2 中实现 JQuery ui datepicker。

我写了一个 datePicker 指令，在那里我启用了 datepicker。在这里我可以选择日期，但很难将所选日期发送到父组件。

为了克服这个问题，我在窗口对象上创建了一个对象并将组件引用传递给该对象。从那里我正在调用组件函数。

我觉得这不是最佳做法。

有人可以帮助我以正确的方式做事吗？

import { Directive, ElementRef, Input, NgZone,HostListener,Output,EventEmitter } from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      @Input('uiDatePicker') setDate: string;
      @Output() onSelectDate = new EventEmitter();  
      private el: HTMLElement;
      constructor(el: ElementRef,public zone:NgZone) {
        this.el = el.nativeElement;

        window.angularComponentRef = {
          zone: this.zone, 
          component: this
        };
      }

      doEmitDate(dateText:string){
          this.onSelectDate.emit(dateText);
      }
      ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            window.angularComponentRef.component.doEmitDate(dateText);
         }
        });
       }
}

这里我不喜欢使用 window.angularComponentRef.component 对象。因为它只是将引用存储在全局对象中。这对应用程序不利。

Answer 1

import { Directive, ElementRef, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

declare var $: any;

export const CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => UiDatePickerDirective),
    multi: true
};

@Directive({
    selector: '[uiDatePicker]',
    host: { '(blur)': 'onTouched($event)' },
    providers: [CUSTOM_INPUT_DATE_PICKER_CONTROL_VALUE_ACCESSOR]
})
export class UiDatePickerDirective implements ControlValueAccessor {
    private innerValue: string;

    @Input('changeMonth') changeMonth: boolean = true;
    @Input('changeYear') changeYear: boolean = true;

    constructor(private el: ElementRef) {
    }

    ngOnInit() {
        $(this.el.nativeElement).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd/mm/yy'
        }).on('change', (e: any) => {
            this.onChange(e.target.value);
        });
    }


    public onChange: any = (_:any) => { /*Empty*/ }
    public onTouched: any = () => { /*Empty*/ }

    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChange(v);
        }
    }


    writeValue(val: string): void {
        this.innerValue = val;
        $(this.el.nativeElement).datepicker("setDate", this.innerValue);
    }

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }
}

<input type="text" uiDatePicker [(ngModel)]="note.ValidTo"/>

这是here的修改版。

Answer 2

出于所有意图和目的，您可以使用var self = this 思想和闭包来维护对组件的引用。

如果您没有在onSelect 回调中进行任何预处理，则可以通过将绑定的doEmitDate 函数作为onSelect 处理程序传递来进一步简化事情。

import { Directive, ElementRef, Input, NgZone,HostListener,Output,EventEmitter } from '@angular/core';
declare  var $:any;

@Directive({
  selector: '[uiDatePicker]',
})
export class UiDatePickerDirective {
  @Input('uiDatePicker') setDate: string;
  @Output() onSelectDate = new EventEmitter();
  private el: HTMLElement;

  constructor(el: ElementRef, public zone: NgZone) {
    this.el = el.nativeElement;
  }

  doEmitDate(dateText:string){
    this.onSelectDate.emit(dateText);
  }

  ngOnInit() {
    const component = this;
    $(this.el).datepicker({
      onSelect: function(dateText: string) {
        component.doEmitDate(dateText);
      }
    });

    // Or if you're not doing anything else in the onSelect callback
    $(this.el).datepicker({
      onSelect: this.doEmitDate.bind(this)
    });
  }
}