Как отобразить символ валюты справа в угловом 2

Question

я должен показывать евровалюты как этот «583 €», но с этим кодом:

{{price | currency:'EUR':true}} 

я получаю «€ 583», есть ли вариант в ядре Angular 2, чтобы переместить символ вправо? Многие европейские страны используют символ справа (Франция, Германия, Испания, Италия).

Answer 1

С Angular2 RC6 версии вы можете установить локаль по умолчанию непосредственно в модуле приложения (поставщики):

import {NgModule, LOCALE_ID} from '@angular/core'; 

@NgModule({ 
    providers: [{ 
     provide: LOCALE_ID, 
     useValue: 'de-DE' // 'de-DE' for Germany, 'fr-FR' for France ... 
    }, 
    ] 
}) 

Затем валюта труба должна подобрать языковые настройки и переместить символ вправо:

@Component({ 
    selector:"my-app", 

    template:` 
    <h2>Price:<h2> 
    {{price|currency:'EUR':true}} 
    ` 
}) 

Answer 2

Честно говоря, я не смог найти встроенный способ сделать это. Итак, созданная пользовательская труба под названием split.

работы Демонстрация: Формат http://plnkr.co/edit/KX7hfaV2i7CX2VFobM8R?p=preview

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

@Pipe({name:'split'}) 
export class ShiftPosition implements PipeTransform { 
    transform(items: any[], value: string): string { 
     return items.substr(1)+' ' +items.substr(0,1); 
    } 
} 


@Component({ 
    selector:"my-app", 

    template:` 
    <h2>Dashboard<h2> 
    {{price|currency:'EUR':true|split:price}} 
    ` 
}) 

export class AppComponent{  
    price=10; 
} 

Answer 3

валюты трубы находится под контролем the current locale rules. См. Также Using Pipes:

Трубы даты и валюты нуждаются в API интернационализации ECMAScript. Safari и другие старые браузеры не поддерживают его. Мы можем добавить поддержку с polyfill.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script> 

Под капотом CurrencyPipedelegates formatting tonew Intl.NumberFormat(locale, options).format(num);.

Intl.NumberFormat Using options:

var number = 123456.789; 

// request a currency format 
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); 
// → 123.456,79 € 

// the Japanese yen doesn't use a minor unit 
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number)); 
// → ￥123,457 

---

Другими словами, форматирование валюты с CurrencyPipe включает в себя:

1. Используя правильную локаль. См. this on how to replace the default locale, но это необходимо для тестирования только, поскольку ожидается, что у пользователей будет установлен правильный языковой стандарт в настройках ОС.
2. И использование polyfill для старых браузеров.

Answer 4

Предоставить LOCALE_ID не было решением, потому что мое приложение написано на английском языке, но показывает валюту с французским языковым стандартом. Поэтому, если я установил свой LOCALE_ID на fr-FR, все мои даты на французском языке, что неприемлемо.

Поэтому я просто выбираю decimal pipe, затем добавляю символ в конце.

<div> 
    {{ document.totalTaxAmount | number:'1.2-2' }} EUR 
</div> 

Проблема здесь, если номер не определен, вы получите только символ.Чтобы решить эту проблему, я создал не пустую трубку:

@Pipe({ 
    name: 'notEmpty' 
}) 
export class NotEmptyPipe implements PipeTransform { 
    transform(value: any, replaceWith: any = ""): any { 
     if (!value) { 
      return replaceWith; 
     } 
     return value; 
    } 
} 

И использовать его как это:

<div> 
    {{ document.totalTaxAmount | number:'1.2-2' | notEmpty: '0' }} EUR 
</div> 

Answer 5

Делают это так:

{{price | currency:'EUR':true:'1.0-0'}} 

Нет необходимости в дополнительных труб, он использует валюту по умолчанию