Вот мое решение.
Я хотел выделить данные в форме, которые изменяются другими пользователями в режиме реального времени.
В моей HTML-форме я заменил собственные элементы html на компоненты Angular. Для каждого типа нативного элемента я создал новый компонент Angular с поддержкой Highlight. Каждый компонент реализует интерфейс Angular ControlValueAccessor.
В родительской форме заменил родной элемент:
<input [(ngModel)]="itinerary.DetailWeather" />
моим настраиваемым элементом:
<reactive-input [(ngModel)]="itinerary.DetailWeather"></reactive-input>
Когда Angular вызывает detectChanges () для родительской формы, он проверяет все данные, которые используются в качестве входных данных компонентами формы.
Если компонент является ControlValueAccessor и в модели приложения произошло изменение, он вызывает метод ControlValueAccessor. writeValue (value). Это метод, который вызывается при изменении данных в памяти. Я использую его как ловушку, чтобы временно обновить стиль, чтобы добавить выделения.
Вот кастомный элемент. Я использовал Angular Animations для обновления цвета границы и возврата к исходному цвету.
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 {};
}
person
Anthony Brenelière
schedule
04.01.2018
input
элементам? а что вы имеете в виду подchanged
? Я слышал о специальных стилях классов, установленных Angular2 - вы имеете в видуng-dirty
class? если да, попробуйте просто добавить стиль дляinput.ng-dirty {background-color: green}
- person Max Koretskyi   schedule 18.05.2017valueChanges: Observable<any>
. (генерирует событие каждый раз, когда значение элемента управления изменяется в пользовательском интерфейсе или программно.) Установите флажок Документация по Angular для получения дополнительной информации. - person lucascurti   schedule 14.06.2017