Angular 2 Direktive Änderung Erkennung, Direktive nicht aktualisieren

Question

Ich habe eine Angular 2 App, die eine Nummer anzeigt. Die Nummer kann negativ oder positiv sein. Wenn der Wert negativ ist, setze ich die Schriftfarbe auf rot. Ich mache das über eine Direktive. Diese Nummer wird ständig über einen Sender aktualisiert.

Das Problem, das ich habe, ist, wenn der Wert von einem negativen zu einem positiven Wert wechselt. Die Richtlinie nimmt diese Änderung nicht auf und läuft sehr langsam, dh die Farbe wird nicht aktualisiert. Ich muss irgendwo auf den Bildschirm klicken und dann ändert sich die Schriftfarbe. Ich glaube nicht, Change-Erkennung passiert, wenn ich es brauche.

Wie kann ich diese Direktive zur gleichen Zeit aktualisieren, wie der zugrunde liegende Wert?

Meine Richtlinie sieht wie folgt aus ...

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

es wie folgt auf die UI angewendet wird ...

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

Answer 1

Sanitäter, der wie ein falscher Ansatz sieht Winkel zu verwenden und es ist Fähigkeiten. Ich glaube, ein besserer Ansatz wäre es, die Bindung an style.color in Kombination durch die negativeValueStyle Richtlinie verabschiedet mit einem Wert zu verwenden:

ungetesteten Code voraus

@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 + '%'; 
    } 
} 

Sie dann diese Anweisung wie folgt verwenden können :