कोणीय: अस्थायी रूप से उन डोमेन तत्वों को हाइलाइट कैसे करें जो अभी बदल गए हैं?

Question

अपने आप को एक समाधान लागू करने से पहले मैं जानना चाहता हूं कि किसी तत्व की शैली को बदलने के लिए एक सरल तरीका है (एक संक्षिप्त हाइलाइट) जब डेटा बाध्य संपत्ति मूल्य बदल गया है।

मेरे डोम में बहुत से तत्व हैं इसलिए मैं घटक में समर्पित संपत्ति को स्टोर और रखरखाव नहीं करना चाहता हूं।

उजागर करने के लिए मेरे तत्वों पारंपरिक इनपुट फार्म के तत्व हैं:

<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> 

मैं विशेष वर्ग शैलियों ngModel निर्देश के साथ तत्व मैं क्या आवश्यकता है मदद कर सकता है पर Angular2 द्वारा निर्धारित के बारे में सुना है, लेकिन मैं इसके बारे में अधिक नहीं पा सके ।

Answer 1

यहां मेरा समाधान है।

मैं प्रपत्र में डेटा को हाइलाइट करना चाहता था जो वास्तविक समय में अन्य उपयोगकर्ताओं द्वारा बदला जाता है।

मेरे एचटीएमएल फॉर्म में, मैंने कोणीय घटकों द्वारा मूल HTML तत्वों को प्रतिस्थापित किया। प्रत्येक प्रकार के मूल तत्व के लिए मैंने हाइलाइट समर्थन के साथ एक नया कोणीय घटक बनाया। प्रत्येक घटक ControlValueAccessor कोणीय इंटरफ़ेस लागू करता है। अपने कस्टम तत्व द्वारा

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

:

माता पिता रूप में मैं देशी तत्व की जगह

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

जब कोणीय कॉल detectChanges() माता-पिता फार्म के लिए, यह सब जाँच करता है डेटा के रूप में इनपुट के रूप में उपयोग किए जाने वाले डेटा।

यदि कोई घटक ControlValueAccessor है, और एप्लिकेशन मॉडल में कोई परिवर्तन हुआ है, तो यह विधि ControlValueAccessor को कॉल करता है। लिखें वैल्यू (मूल्य)। यह विधि है जिसे स्मृति में डेटा बदलते समय कहा जाता है। मैं हाइलाइट जोड़ने के लिए अस्थायी रूप से शैली को अद्यतन करने के लिए इसे एक हुक के रूप में उपयोग करता हूं।

यहां कस्टम तत्व है। मैंने सीमा रंग को अद्यतन करने और मूल रंग में वापस फीका करने के लिए कोणीय एनिमेशन का उपयोग किया।

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

सबसे आसान और क्लीनर तरह से मैं के बारे में सोच सकते हैं, ताकि जैसे 2 सीएसएस वर्गों को लागू करना है:

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

और फिर तत्व को उन दोनों को प्रभावित क्रमिक। आशा है कि