在 Angular 个管道中干燥

Question

我有几个金额变量，我想通过货币管道对其进行格式化。这是组件模板的简化版本：

<p>{{amount1 | currency : 'USD' : 'symbol' : '1.0-0'}}</p>
...
<p>{{amount2 | currency : 'USD' : 'symbol' : '1.0-0'}}</p>
...
<div>{{amount3 | currency : 'USD' : 'symbol' : '1.0-0'}}</div>
...
<h1>{{amount4 | currency : 'USD' : 'symbol' : '1.0-0'}}</h1>

本例中如何实现DRY？请注意，金额元素不在同一级别（即无法通过 *ngFor 生成）。

p.s。也很高兴看到参数化解决方案（如果某些货币有其他配置，如 currencyCode、digitsInfo 等）

Answer 1

您可以扩展 CurrencyPipe:

import { Pipe } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Pipe({
  name: 'usdCurrency'
})
export class UsdCurrencyPipe extends CurrencyPipe {
  transform(value: number, digitsInfo: string = "1.0-0"): any {
    return super.transform(value, "USD", "symbol", digitsInfo);  }
}

并在您的模板中应用该自定义管道：

<p>{{amount1 | usdCurrency }}</p>
<p>{{amount2 | usdCurrency }}</p>
<div>{{amount3 | usdCurrency }}</div>
<h1>{{amount4 | usdCurrency : "1.2-2" }}</h1>

在上面的示例中，digitsInfo 可用作可选参数。如果需要，可以提供其他参数 (currencyCode、display、locale)。

有关演示，请参阅 this stackblitz。

在 Angular 个管道中干燥

DRY in Angular pipes

angular

dry

angular-pipe