技术栈：devextreme UI库数据表angular
编辑credit-analysis-grid.component.ts文件如下
import { Component, OnInit,Input,ViewEncapsulation, ChangeDetectorRef, ElementRef, Directive,NgZone,SimpleChanges,OnChanges,ViewChild, ChangeDetectionStrategy } from '@angular/core';
@Directive({
selector: '[flashable]'
})
export class FlashDirective implementsOnChanges {
@Input ('flashable') value: any;
constructor(private el: ElementRef, private zone: NgZone) {
}
flashTimer: NodeJS.Timer;
ngOnChanges(sc: SimpleChanges) {
console.log(sc['value'],'bbbb')
if (!sc['value'].firstChange) {
if (this.value instanceof Date) {
if ((sc['value'].previousValue&& sc['value'].currentValue) && (sc['value'].previousValue asDate).valueOf() === (sc['value'].currentValue as Date).valueOf()) {
return;
}
}
this.zone.runOutsideAngular(() => {
if (this.flashTimer) {
clearTimeout(this.flashTimer);
this.el.nativeElement.className = '';
}
this.el.nativeElement.className ='normal-flash';
let self = this;
this.flashTimer = setTimeout(function() {
self.el.nativeElement.className = '';
}, 2000);
});
}
}
}
credit-analysis.module.ts中引入
import {CreditAnalysisGridComponent,FlashDirective,PriceFlashDirective} from'./credit-analysis-grid/credit-analysis-grid.component';
@NgModule({
imports: [
SharedModule,
BondMatchingSharedModule
],
declarations: [
FlashDirective,
],
exports: [
FlashDirective
],
providers: [
CreditAnalysisService,
{
provide:PROD_ANALYSIS_SERVICE_TOKEN,
useClass:CreditAnalysisService
}]
})
export class CreditAnalysisModule { }
credit-analysis-grid.component.html文件中使用
{{ab.data.name}}
样式参考：
.normal-flash {
background: #00b5ef !important;
animation-name: flash;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.fall-flash {
background: green !important;
animation-name: flash;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.raise-flash {
background: red !important;
animation-name: flash;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes flash {
50% {
background: rgba(255, 255, 255, 0);
}
}
网友评论