Ответ 1
Вот мое решение.
Я хотел бы выделить данные в форме, которые другие пользователи используют в режиме реального времени.
В моей HTML-форме я заменил собственные элементы html компонентами Angular. Для каждого типа встроенного элемента я создал новый компонент Angular Component with Highlight. Каждый компонент реализует интерфейс ControlValueAccessor Angular.
В родительской форме я заменил собственный элемент:
<input [(ngModel)]="itinerary.DetailWeather" />
моим пользовательским элементом:
<reactive-input [(ngModel)]="itinerary.DetailWeather"></reactive-input>
Когда Angular вызывает detectChanges() для родительской формы, он проверяет все данные, которые используются в качестве входов компонентами формы.
Если компонент является контроллером ControlValueAccessor, а изменение произошло в модели приложения, оно вызывает метод ControlValueAccessor. writeValue (значение). Это метод, который вызывается, когда данные изменяются в памяти. Я использую его как крючок, чтобы временно обновить стиль, чтобы добавить выделение.
Вот пользовательский элемент. Я использовал анимацию Angular для обновления цвета рамки и возврата к исходному цвету.
import { Component, Input, forwardRef, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';
@Component(
{
selector: 'reactive-input',
template: `<input class="cellinput" [(ngModel)]="value" [@updatingTrigger]="updatingState" />`,
styles: [`.cellinput { padding: 4px }`],
animations: [
trigger(
'updatingTrigger', [
transition('* => otherWriting', animate(1000, keyframes([
style ({ 'border-color' : 'var( --change-detect-color )', offset: 0 }),
style ({ 'border-color' : 'var( --main-color )', offset: 1 })
])))
])
],
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ReactiveInputComponent), multi: true } ]
})
export class ReactiveInputComponent implements ControlValueAccessor {
public updatingState : string = null;
_value = '';
// stores the action in the attribute (onModelChange) in the html template:
propagateChange:any = ( change ) => {};
constructor( private ref: ChangeDetectorRef ) { }
// change from the model
writeValue(value: any): void
{
this._value = value;
this.updatingState = 'otherWriting';
window.setTimeout( () => {
this.updatingState = null;
}, 100 );
// model value has change so changes must be detected (case ChangeDetectorStrategy is OnPush)
this.ref.detectChanges();
}
// change from the UI
set value(event: any)
{
this._value = event;
this.propagateChange(event);
this.updatingState = null;
}
get value()
{
return this._value;
}
registerOnChange(fn: any): void { this.propagateChange = fn; }
registerOnTouched(fn: () => void): void {}
setDisabledState?(isDisabled: boolean): void {};
}