Kątowy: jak tymczasowo podświetlić elementy DOM, które właśnie się zmieniły?

Question

Przed samodzielnym wdrożeniem rozwiązania chciałbym się dowiedzieć, czy istnieje prosty sposób zmiany stylu elementu (krótkie podświetlenie), gdy wartość związana z właściwością danych właśnie się zmieniła.

Jest wiele elementów w moim DOM, więc nie chcę przechowywać i utrzymywać dedykowanej właściwości w komponencie.

Moje elementy, aby podświetlić to elementy tradycyjnej formie wejściowego:

<tr field label="Lieu dépôt"> 
     <select class="cellinput" #lieuDepotBon [(ngModel)]="rapport.LieuDepotBon" (ngModelChange)="changeRapport({LieuDepotBon:$event})"> 
      <option [ngValue]="null"></option> 
      <option [ngValue]="i" *ngFor="let depotBonChoice of DepotBonInterventionValues; let i = index">{{DepotBonIntervention[i]}}</option> 
     </select> 
    </tr> 
    <tr field *ngIf="rapport.LieuDepotBon==DepotBonIntervention.Autre" label="Autre lieu"> 
     <input class="cellinput" #autreLieuDepotBon [(ngModel)]="rapport.AutreLieuDepotBon" (ngModelChange)="changeRapport({AutreLieuDepotBon:autreLieuDepotBon.value})" /> 
    </tr> 

Słyszałem o specjalnych stylów klasy ustalonych przez Angular2 na elemencie z dyrektywą ngModel które mogą pomóc zrobić to, czego potrzebuję, ale nie mogłem znaleźć więcej na ten temat .

Answer 1

Oto moje rozwiązanie.

Chciałem podkreślić dane w formularzu, które zostały zmienione przez innych użytkowników w czasie rzeczywistym.

W mojej formie HTML zastąpiłem natywne elementy HTML przez komponenty Angular. Dla każdego typu natywnego elementu stworzyłem nowy komponent kątowy z obsługą podświetlenia. Każdy komponent implementuje interfejs kątowy ControlValueAccessor.

W postaci dominującej Wymieniłem rodzimy element:

<input [(ngModel)]="itinerary.DetailWeather" /> 

przez mojego niestandardowego elementu:

<reactive-input [(ngModel)]="itinerary.DetailWeather"></reactive-input> 

Kiedy kątowe połączeń detectChanges() w postaci dominującej, to jednak sprawdzić wszystkie dane, które są używane jako dane wejściowe przez składniki formularza.

Jeśli komponent jest AccessValueAccessor i zmiana wystąpiła w modelu aplikacji, wywołuje metodę ControlValueAccessor. writeValue (wartość). Jest to metoda, która jest wywoływana, gdy dane zmieniły się w pamięci. Używam go jako haka, aby tymczasowo zaktualizować styl, aby dodać atrakcję.

Oto niestandardowy element. Użyłem Angular Animations do aktualizacji koloru obramowania i przejścia do pierwotnego koloru.

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 {}; 
} 

Answer 2

Najprostszym i przejrzysty sposób mogę myśleć jest wdrożenie 2 klas css tak:

.highlight{ 
    background-color: #FF0; 
} 
.kill-highlight{ 
    background-color: #AD310B; 
    -webkit-transition: background-color 1000ms linear; 
    -ms-transition: background-color 1000ms linear; 
    transition: background-color 1000ms linear; 
} 

a następnie wpływa zarówno z nich kolejno do elementu. nadzieję, że pomaga