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。

在角管中干燥

1 个答案: