以Angular(5)"正确"方式将样式应用于尾随零

Question

我想修改数字的尾随零的字体粗细和颜色.使用数字管道我可以指定8个小数,但我希望所有这些添加的零的视觉重要性低于其余的数字.我怎样才能以最正确的"正确"方式实现这一目标？

请参阅下面的图像,以便直观地展示我正在努力实现的目标:

Answer 1

您不应通过创建自己的自定义管道来实现此功能.这是因为应用自定义字体颜色与显示给定文本的容器相关.管道应该保持独立于容器(它们只是操纵原始数据).这就是你应该创建自己的指令的原因.这里有一个工作示例:

 @Component ({
  selector: 'my-selector',
  template: `<div myTextHighlight>1.543020000</div>`
})
export class AppComponent {
}

@Directive({
  selector: '[myTextHighlight]'
})
export class HighlightDirective implements OnInit{
  private element: ElementRef;

  ngOnInit(): void {
    setTimeout(()=> {
      let originalHTML = this.element.nativeElement.innerHTML;
      let whitePart = Number.parseFloat(originalHTML).toString();
      let greyPart = originalHTML.substring(whitePart.length, originalHTML.length);
      this.element.nativeElement.innerHTML = 
        `<span style='color: white'>${whitePart}</span>
        <span style='color: darkgrey'>${greyPart}</span>`;
    });
  }

  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'black';
    this.element = el;
  }
}