Question

我有一个显示数字的Angular 2应用程序。数字可以是负数或正数。如果值为负，我将字体颜色设置为红色。我是通过指令来做到这一点的。这个数字通过发射器不断更新。

我遇到的问题是当值从负值变为正值时。该指令没有获取此更改并且运行速度非常慢，即颜色未更新。我必须单击屏幕上的任意位置，然后字体颜色会发生变化。我不认为在需要时会发生变化检测。

如何在基础值同时更新此指令？

我的指示看起来像这样......

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[negativeValueStyle]' })
export class NegativeValueStyleDirective {

    constructor(private el: ElementRef) { }

    ngAfterContentChecked() {

        if (this.el.nativeElement.innerHTML < 0)
            this.el.nativeElement.style.color = 'red';
        else
            this.el.nativeElement.style.color = 'black';
    }
}

它正在应用于这样的UI ......

<td negativeValueStyle>{{data.return | number: '1.2-2'}}%</td>

Answer 1

亲爱的，这看起来像是一种使用角度和它的能力的错误方法。我认为更好的方法是将style.color上的绑定与通过negativeValueStyle指令传递的值结合使用：

未经测试的代码

@Directive({ selector: '[negativeValueStyle]' })
export class NegativeValueStyleDirective {

    @Input('negativeValueStyle')
    public value: number;

    @HostBinding('style.color')
    public get color(): string {
       return this.value < 0 ? 'red' : 'black';
    }

    @HostBinding('innerHtml')
    public get innerHtml(): string {
       return this.value + '%';
    }
}

然后您可以像这样使用此指令：

<td [negativeValueStyle]="data.return | number: '1.2-2'"></td>

Angular 2指令更改检测，指令不更新

1 个答案: