Góc: Làm thế nào để tạm thời làm nổi bật các phần tử dom vừa mới thay đổi?

Question

Trước khi tự mình thực hiện một giải pháp, tôi muốn biết nếu có một cách đơn giản để thay đổi kiểu của một phần tử (đánh dấu ngắn) khi giá trị thuộc tính bị ràng buộc dữ liệu vừa thay đổi.

Có rất nhiều phần tử trong DOM của tôi nên tôi không muốn lưu trữ và duy trì thuộc tính chuyên dụng trong thành phần.

yếu tố của tôi để làm nổi bật là những yếu tố hình thức đầu vào của truyền thống:

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

Tôi nghe nói về phong cách lớp học đặc biệt được thiết lập bởi Angular2 trên phần tử với chỉ thị ngModel mà có thể giúp làm những gì tôi cần, nhưng tôi không thể tìm thấy thêm về nó .

Answer 1

Đây là giải pháp của tôi.

Tôi muốn làm nổi bật dữ liệu trong Biểu mẫu được thay đổi bởi người dùng khác trong thời gian thực.

Trong biểu mẫu HTML của tôi, tôi đã thay thế các phần tử html gốc bằng thành phần Góc. Đối với mỗi loại phần tử gốc tôi đã tạo ra một thành phần Angular mới với hỗ trợ Highlight. Mỗi thành phần triển khai giao diện góc ControlValueAccessor Góc.

Trong form cha tôi đã thay thế các yếu tố tự nhiên:

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

bởi yếu tố tùy chỉnh của tôi:

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

Khi cuộc gọi kiễu góc detectChanges() cho form cha, nó rà soát tất cả dữ liệu được sử dụng làm đầu vào bởi các thành phần của biểu mẫu.

Nếu một thành phần là một ControlValueAccessor và thay đổi xảy ra trong mô hình ứng dụng, nó gọi phương thức ControlValueAccessor. writeValue (giá trị). Nó là phương thức được gọi khi dữ liệu thay đổi trong bộ nhớ. Tôi sử dụng nó như một cái móc để cập nhật tạm thời kiểu để thêm đánh dấu.

Đây là phần tử tùy chỉnh. Tôi đã sử dụng Ảnh động góc để cập nhật màu đường viền và mờ dần về màu gốc.

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

Cách đơn giản nhất và rõ ràng hơn tôi có thể nghĩ đến là thực hiện 2 lớp css như sau:

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

và sau đó ảnh hưởng đến cả trong số họ liên tiếp để nguyên tố này. hy vọng rằng sẽ giúp