Угловая 2: Директива по окрашиванию и отображению числовых данных

Question

Как создать директиву, которая должна окрашивать и отображать введенное числовое значение. Важная часть - это директива по обнаружению изменений и реагированию на изменение входного значения.

Вот мой пример кода:

//our root app component 
import {Directive, Component, NgModule, Input, OnInit, OnDestroy, ElementRef} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <h2>Random number: <span my-value [value]="num"></span></h2> 
    </div> 
    `, 
}) 
export class App implements OnInit, OnDestroy { 
    name: string; 
    num: number = 100; 

    private interval: any; 

    constructor() { 
    this.name = 'Angular2'; 

    } 

    ngOnInit() { 
    this.interval = setInterval(() => { 
     this.num = this.getRandomInt(-100, 100); 
    }, 1000); 
    } 

    ngOnDestroy { 
     clearInterval(this.interval); 
    } 

    private getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
    } 
} 


@Directive ({ 
    selector: '[my-value]' 
}) 
export class MyValueDirective { 
    @Input() value: number; 

    constructor(private el: ElementRef) { 

    } 

    ngOnInit(): void { 
    if (this.value < 0) { 
     this.el.nativeElement.style.color = 'red'; 
    } else { 
     this.el.nativeElement.style.color = 'blue'; 
    } 
    this.el.nativeElement.innerHTML = this.value; 
    } 
} 


@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, MyValueDirective ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Example code in Plunker

Спасибо!

Answer 1

Разместите код, обновляющий стиль внутри метода директивы ngOnChanges() вместо метода ngOnInit().

Угловой вызов метода ngOnChanges() всякий раз, когда он обнаруживает изменения в свойствах ввода директивы. См https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#onchanges

@Directive ({ 
    selector: '[my-value]' 
}) 
export class MyValueDirective { 
    @Input() value: number; 

    constructor(private el: ElementRef) {} 

    ngOnChanges(changes: SimpleChanges) { 
    const value = changes['value']; 
    if (value < 0) { 
     this.el.nativeElement.style.color = 'red'; 
    } else { 
     this.el.nativeElement.style.color = 'blue'; 
    } 
    this.el.nativeElement.innerHTML = value; 
    } 
} 

ДОПОЛНИТЕЛЬНОГО УЛУЧШЕНИЯ: Почему бы не использовать такое же имя для selector И в @Input()?

@Directive ({ 
    selector: '[myValue]' 
}) 
export class MyValueDirective { 
    @Input() myValue: number; 
    // ... 
} 

Теперь вы можете использовать директиву, как это (более компактный):

<span [myValue]="num"></span>