不应用角度 2 指令颜色

Question

我有以下应用颜色属性的指令

import { Directive, Input, ElementRef, Renderer2, OnChanges } from '@angular/core';
@Directive({
    selector: '[numberColor]'
})
export class NumberColorDirective implements OnChanges {
    @Input() numberValue: number;
    constructor(private elRef: ElementRef,
        private renderer: Renderer2) {
    }
    ngOnChanges(): void {
        if (this.numberValue > 0) {
            this.renderer.setStyle(this.elRef.nativeElement, 'color', 'green!important');
        }
        else if (this.numberValue < 0)
            this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red!important');
    }
}

在 HTML 中：

<td numberColor [numberValue]="TotalProfit">
                            {{TotalProfit}}
</td>

但它似乎不起作用

Answer 1

您必须使用 RendererStyleFlags2 来添加!important样式。

查看源代码，如果您想添加重要标志，他们以某种方式希望您也添加DashCase标志：

this.renderer.setStyle(
  this.elRef.nativeElement, 
  'color', 
  'green', 
  RendererStyleFlags2.Important + RendererStyleFlags2.DashCase
);