Отобразить отрицательную валюту с круглыми скобками в Angular 2/Typcript

Question

Локализация Angular's en-us обновлена ​​с 1,3 для отображения отрицательной валюты с отрицательным знаком вместо круглых скобок. Я использую AngularJS 2/Typcript и хотел бы переопределить отрицательный знак по умолчанию с круглыми скобками (или даже что-то еще).

Discussion на этом показывает переопределение negPre & negSuf однако я не вижу, как это сделать с помощью Angular2. Или, может быть, более элегантный способ добиться этого.

Answer 1

Я благодарю вас за задание этого замечательного вопроса. Конечно, валютная трубка существует, но после сканирования current pipe documentation кажется, что из коробки этот труба не будет делать то, что вы хотите. Однако вы можете выполнить свою задачу с помощью настраиваемой трубы.

1. Во-первых, признайте, что вы можете «цепные трубы».

Например, вы можете иметь переменный тип номера, отправить по валютной трубе, а затем отправить его через свои собственные пользовательские трубы:

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

2. Признать, что валюта трубу возвращающей строка.

Это означает, что ваша пользовательская трубка может принимать строку, выполнять некоторые манипуляции с строкой и возвращать новую строку.

3. Признать, что алгоритм манипуляции строкой, чтобы перейти от знака минус к круглым скобкам, на самом деле не так уж сложно.

Логика может быть интерпретирована на английском языке следующим образом: «Если первый символ моего входного значения не является знаком минус, то просто верните значение, но если это знак минус, верните всю строку без этого первый символ и добавьте строку из одного парна по обе стороны от него ». Использование тройного оператора 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 трубы:

@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, протрите его!