Angular:如何暂时突出刚改变的dom元素？

Question

在我自己实现解决方案之前,我想知道在数据绑定属性值刚刚更改时是否有一种简单的方式来更改元素的样式(简短的突出显示).

我的DOM中有很多元素,所以我不想在组件中存储和维护专用属性.

我要强调的元素是传统的输入形式元素:

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

我听说过Angular2在元素上使用ngModel指令设置的特殊类样式可以帮助我做我需要但我找不到更多关于它的内容.

Answer 1

我能想到的最简单、更简洁的方法是实现 2 个 css 类，如下所示：

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

然后将它们依次影响到元素。希望有帮助

Answer 2

这是我的解决方案。

我想突出显示表单中其他用户实时更改的数据。

在我的 HTML 表单中，我用 Angular 组件替换了原生 html 元素。对于每种类型的本机元素，我创建了一个具有突出显示支持的新 Angular 组件。每个组件都实现ControlValueAccessor Angular 接口。

在父表单中，我替换了本机元素：

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

通过我的自定义元素：

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

当 Angular 为父表单调用detectorChanges()时，它会检查表单组件用作输入的所有数据。

如果组件是 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 {};
}