Question

Angular的en-us本地化自1.3以来已经更新，以负号显示负号而不是括号。我正在使用AngularJS 2 / Typescript，并希望用括号覆盖默认的负号（甚至是其他东西）。

Discussion在此显示覆盖negPre＆amp;但是我不知道如何用Angular2做这个。或者也许是一种更优雅的方式来实现这一目标。

Answer 1

感谢你提出这个好问题。当然货币管道确实存在，但在扫描current pipe documentation后，似乎开箱即用，这个管道不会做你想要的。但是，您可以使用自定义管道来实现目标。

<强> 1。首先，要认识到你可以＆＃34;链管＆＃34;。

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

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

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

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

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

这个逻辑可以用这样的计划英语来解释，＆＃34;如果输入值的第一个字符不是减号，那么只返回值，但如果是减号则返回整个字符串而不是第一个字符并在其两侧附加一个单个paren的字符串＆＃34;。使用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;
    }
}

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

请记住，正如Migos所说，把它搞砸了！

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

1 个答案: