angular - 在 Angular 2/Typescript 中用括号显示负货币

Question

Angular 的 en-us 本地化自 1.3 以来已更新，以使用负号而不是括号显示负货币。我正在使用 AngularJS 2/Typescript 并想用括号(或什至其他东西)覆盖默认的负号。

Discussion在此显示覆盖 negPre & negSuf 但是我不知道如何使用 Angular2 执行此操作。或者可能是一种更优雅的方式来实现这一目标。

Answer 1

感谢您提出这个很好的问题。当然货币管道确实存在，但是在扫描 currency pipe documentation 之后开箱即用的管道似乎无法满足您的要求。但是，您可以使用自定义管道来实现您的目标。

<强>1。首先，认识到您可以“链接管道”。

比如你可以有一个数字类型的变量，通过货币管道发送，然后通过你自己自定义的管道发送:

<h1>{{someNumber | currency:'USD':true | myCustomPipe}}</h1>

<强>2。认识到货币管道返回一个字符串。

这意味着您的自定义管道可以接受一个字符串，进行一些字符串操作，然后返回一个新字符串。

<强>3。认识到从减号到括号的字符串操作算法并没有那么复杂。

这个逻辑在计划英语中可以这样解释，“如果我输入值的第一个字符不是减号，那么只返回该值，但如果它是一个减号，则返回没有第一个字符的整个字符串并在它的两边附加一个单括号的字符串”。使用 JavaScript 三元运算符，它可能看起来像这样:

value.charAt(0) === '-' ?
'(' + value.substring(1, value.length) + ')' :
value;

我还创建了一个很好的 Pipe 来作为最小可行示例执行此操作。假设您有这个组件显示值为 -5(负五)的 someNumber 变量。

@Component({
  selector: 'my-app',
  template: `
    <h2>MinusSignToParens Pipe Demo</h2>
    <h1>{{someNumber | currency:'USD':true | minusSignToParens}}</h1>
  `
})
export class App implements OnInit {
   
  private someNumber = -5;
  
  constructor() {}
  
  ngOnInit() {}
}

下面是 minusSignToParens 管道的代码:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'minusSignToParens'
})
export class MinusSignToParens implements PipeTransform {

    transform(value: any, args?: any): any {
        return value.charAt(0) === '-' ?
           '(' + value.substring(1, value.length) + ')' :
           value;
    }
}

这里是 the example in a Plunkr如果你想玩它。

记住，作为Migos会说，管它!