Angular 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() 方法中。

Angular 每当检测到指令的输入属性发生变化时，都会调用 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>

Angular 2: 数字数据着色显示指令

Angular 2: Directive for coloring and displaying numeric data

angular2-changedetection

angular