Как отобразить символ валюты справа в Angular 2
Мне нужно отображать еврокубку, такую как "583 €", но с этим кодом:
{{price | currency:'EUR':true}}
Я получаю € 583, есть ли опция в Angular 2 ядра, чтобы переместить символ вправо? Многие европейские страны используют символ справа (Франция, Германия, Испания, Италия).
Ответы
Ответ 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}}
`
})
Ответ 2
Формат денежной трубы контролируется текущими правилами локали. См. Также Использование труб:
Каналам даты и валюты нужен API интернационализации ECMAScript. Safari и другие старые браузеры не поддерживают его. Мы можем добавить поддержку с помощью polyfill.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
Под капотом CurrencyPipe
делегирует форматирование new Intl.NumberFormat(locale, options).format(num);
.
Intl.NumberFormat Использование параметров:
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
включает в себя:
- Использование правильной локали. См. о том, как заменить стандартную локаль, но это должно быть необходимо только для тестирования, поскольку ожидается, что у пользователей будет установлен правильный языковой стандарт в настройках ОС.
- И используя polyfill для старых браузеров.
Ответ 3
Честно говоря, я не смог найти встроенный способ сделать это.
Итак, созданный пользовательский канал называется 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;
}
Ответ 4
Предоставить LOCALE_ID не было решением, потому что мое приложение написано на английском языке, но показывает валюту с французским языковым стандартом. Поэтому, если я установил свой LOCALE_ID на fr-FR
, все мои даты на французском языке, что неприемлемо.
Поэтому я просто выбираю десятичный канал, затем добавляю символ в конце.
<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>
Ответ 5
Сделайте это так:
{{price | currency:'EUR':true:'1.0-0'}}
Нет необходимости в дополнительных трубах, он использует валюту по умолчанию