Góc 2 Thực hiện chỉ thị ControlValueAccessor không cập nhật thuộc tính 'chạm' khi thay đổi

Question

Tôi đang cố tạo Chỉ thị Angular 2 của riêng mình cho Jquery UI Datepicker. Tôi đã nhìn thấy một số cách tiếp cận khác nhau trên internet và trong SO là tốt, nhưng không ai đạt được mục tiêu mà tôi muốn. Vì vậy, đây là đoạn code mà tôi có cho đến nay:

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

declare var $:any; 

@Directive({ 
    selector: '[date-picker]', 
    providers: [{ 
    provide: NG_VALUE_ACCESSOR,useExisting: 
     forwardRef(() => DatePickerDirective), 
    multi: true 
    }] 
}) 
export class DatePickerDirective implements ControlValueAccessor { 
    private value: string; 

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

    constructor(private el: ElementRef) { 

    } 

    ngAfterViewInit(){ 
    $(this.el.nativeElement).datepicker({ 
     changeMonth: this.changeMonth, 
     yearRange: "1:100", 
     changeYear: this.changeYear 
    }).on('change', e => this.onChange(e.target.value)); 
    } 

    onChange: Function =() => {}; 

    onTouched: Function =() => {}; 

    writeValue(val: string) : void { 
    this.value = val; 
    } 

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

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

gì đang xảy ra là ngay cả khi tôi chọn một ngày (chọn) hoặc gõ trực tiếp vào trường nhập, nó không được cập nhật "chạm" bất động sản.

Bạn có ý tưởng nào để sửa chữa không?

Answer 1

Đối với những người cuối cùng có cùng một vấn đề, tôi đã tìm ra một cách để quản lý nó, như bạn có thể dưới đây:

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(() => DatePickerDirective), 
    multi: true 
}; 

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

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

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

    public onChange: 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; 
    } 

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

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