angular - 创建一些适配器以匹配第 3 方输入和输出

Question

我有一个第 3 方组件，它在 ngModel 中接受 array[object] 并对其进行更改。我只将它用于单个值，所以我希望它只接受对象。

我用ControlValueAccessor. 这使得改变输入和输出。它是一个自动完成选择。这里的问题是，当我选择一个用 null 调用的写入值，然后用对象（有时是杀死页面的无限循环）。我不想在用户选择时调用 writevalue。这是我的组件看起来像

<sky-input-box>
    <label *ngIf="label" class="sky-control-label">
        {{label}}
    </label>
    <sky-lookup 
        selectMode="single" 
        [propertiesToSearch]="propertiesToSearch"
        [search]="search()"
        [searchResultTemplate]="searchResultTemplate" 
        [descriptorProperty]="descriptorProperty" 
        [attr.name]="name"
        [attr.id]="id" 
        [(ngModel)]="value" 
        (ngModelChange)="modalChange($event)">
    </sky-lookup>
</sky-input-box>

export class LookupSingleModeComponent implements OnInit, ControlValueAccessor {
    constructor() { }
    @Input() label?: string;
    @Input() searchFilters: any;
    @Input() propertiesToSearch: string[];
    @Input() search: any;
    @Input() searchResultTemplate: any;
    @Input() descriptorProperty: string;
    @Input() name: string;
    @Input() id: string;
    value: any[];
    ngOnInit(): void { }

    writeValue(obj: any): void {
        this.value = obj ? [obj] : [];
    }

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

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

    setDisabledState?(isDisabled: boolean): void {
    }

    onChange: any = () => { };
    onTouched: any = () => { };

    modalChange: any = () => {
        this.onChange(Array.IsArray(this.value) ? this.value[0] : undefined);
    }
}


``

标签： angularcontrolvalueaccessor