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');
    }
}

in html：

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

但它似乎无法正常工作

Answer 1

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

如果你想添加重要的标志，那么看看source code他们会以某种方式期望你添加DashCase标志：

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

未应用Angular 2指令颜色

1 个答案: