![](/img/trans.png)
[英]Angular component property doesn't update upon change in referencing property
[英]Angular 2 Directive implementing ControlValueAccessor doesn't update 'touched' property on change
我正在嘗試為Jquery UI Datepicker創建自己的Angular 2指令。 我在互聯網上看到了一些不同的方法,但也沒有人達到我想要的目標。 所以這是我到目前為止的代碼:
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;
}
}
發生的事情是,即使我選擇日期(選擇器)或直接在輸入字段上鍵入它,它也不會更新“觸摸”屬性。
你對修復它有什么想法嗎?
對於那些最終遇到同樣問題的人,我想出了一種方法來管理它,如下所示:
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;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.