Javascript 将样式应用于角度（5）中的尾随零；“正确”；方式

我想修改数字尾随零的字体大小和颜色。使用数字管道，我可以指定8位小数，但我希望所有添加的零比数字的其余部分具有更少的视觉意义。我如何才能以尽可能多的角度“正确”地完成这项工作

请参见下图，了解我试图实现的目标的视觉表现：

---

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

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

@组件({
选择器：“我的选择器”，
模板：`1.543020000`
})
导出类AppComponent{
}
@指示({
选择器：“[myTextHighlight]”
})
导出类Highlight指令实现OnInit{
私有元素：ElementRef；
ngOnInit（）：void{
设置超时（（）=>{
让originalHTML=this.element.nativeElement.innerHTML；
让whitePart=Number.parseFloat（originalHTML.toString（）；
让greyPart=originalHTML.substring（whitePart.length，originalHTML.length）；
this.element.nativeElement.innerHTML=
`${whitePart}
${greyPart}`；
});
}
构造函数（el:ElementRef）{
el.nativeElement.style.backgroundColor='黑色'；
该元素=el；
}
}

很有可能使用自定义管道实现此效果。您可以使用自己的自定义

元素替换管道中的尾随零，并使用可以根据需要设置样式的类

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'fadeTrailingZeroes', pure: false })
export class FadeTrailingZeroes implements PipeTransform {
  constructor(public sanitizer: DomSanitizer) {
  }
  transform(text: string): SafeHtml {
    if (text) {
      return this.sanitizer.bypassSecurityTrustHtml(
        text.replace(/([0-9]+(\.[1-9]+)?)(\.?0+$)/g,"$1<span class='fade'>$3</span>")
      );
    } else {
      return text;
    }
  }
}

从'@angular/core'导入{Pipe，PipeTransform}；
从“@angular/platform browser”导入{domsanizer，SafeHtml}；
@管道（{name:'fadeTrailingZeroes'，pure:false}）
导出类FadeTrailingZeroes实现PipeTransform{
构造函数（公共消毒剂：DOMSANTIZER）{
}
转换（文本：字符串）：安全HTML{
如果（文本）{
返回this.sanitizer.bypassSecurityTrustHtml(
text.replace（/（[0-9]+（\.[1-9]+）？）（\.？0+$）/g，“$1$3”）
);
}否则{
返回文本；
}
}
}

下面是一个在的工作示例

---

请注意，最后一个条目不起作用，但这是因为我的正则表达式技能相当差。该示例应足以证明使用自定义管道可以实现所需结果。

是否仅适用于

.0

？是@DanielB，小数点后的任何尾随零。例如，在数字

150.403

的情况下，我希望显示

150.40300000

，并在

3

之后显示所有的零，以具有不同的样式。为什么不能用自定义管道实现“确定”呢？我发布了一个答案，显示了如何做到这一点……我在这里不够精确。我的意思是，在这个场景中使用管道是错误的方法，因为它们不适合这样的任务。您可以在解决方案中看到，您必须使用不纯管道并禁用Angular的内置消毒。这个问题问的是最正确的方式，文档不鼓励他们。我真的认为你应该编辑你的答案，因为你的评论是正确的，但你的回答不正确，说这是不可能的。@Tinki我的所有元素的

innerHTML

似乎什么都不是。可能指令是在填充数据之前初始化的（值不是硬编码的，而是通过

*ngFor

循环从数组加载的）。有没有办法确保指令在值发生变化时更新

innerHTML

？实际上，它似乎对硬编码的值也不起作用，例如在您的示例中。你成功运行了吗

innerHTML

为空。这似乎无法正常工作，在使用代码

SafeValue必须使用[property]=binding时出现以下错误：…

。