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

Question

Angular的en-us本地化自1.3以来一直在更新,以负号显示负号,而不是括号.我正在使用AngularJS 2/Typescript,并希望用括号覆盖默认的负号(甚至是其他东西).

对此的讨论表明要覆盖negPre和negSuf但是我没有看到如何使用Angular2做到这一点.或者也许是一种更优雅的方式来实现这一点.

Answer 1

我很感激你问这个好问题.当然货币管道确实存在,但在扫描了当前的管道文档后,似乎开箱即用,这个管道将无法满足您的需求.但是,您可以使用自定义管道来实现目标.

1.首先,要认识到你可以"链管".

例如,您可以使用数字类型变量,通过货币管道发送它,然后通过您自己的自定义管道发送它:

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

2.认识到货币管道返回一个字符串.

这意味着您的自定义管道可以接受字符串,执行一些字符串操作,并返回一个新字符串.

3.认识到从减号到括号的字符串操作算法并不那么复杂.

逻辑可以在计划英语中解释,如下所示,"如果输入值的第一个字符不是减号,那么只返回值,但如果它是减号,则返回整个字符串而不包含第一个字符并附加一个它两边的一个paren的字符串".使用JavaScript三元运算符,它可能如下所示:

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

我还创建了一个很好的管道,作为一个最小的可行示例.假设您有此组件显示someNumber变量,其值为-5(负五).

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

  private someNumber:any = -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;
    }
}

如果你想玩它,这是Plunkr中的例子.

请记住,正如Migos所说的那样,把它搞砸了!