角2のディレクティブチェンジの検出、ディレクティブが更新されない

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

ああ親愛なる、そしてその能力です。先に

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

あなたは、このように、このディレクティブを使用することができます

未テストコード：私はより良いアプローチはnegativeValueStyleディレクティブを通過した値との組み合わせでstyle.colorにバインディングを使用することであろうと信じて：

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