Question

我必须像这样显示欧元货币：583 €。

但是这段代码：

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

我得到€583，Angular核心中是否有任何选项可以将符号移动到右边？很多欧洲国家在右边使用这个符号（法国，德国，西班牙，意大利）。

Answer 1

从Angular2 RC6版本开始，您可以直接在app模块（提供者）中设置默认语言环境：

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

货币管道格式由the current locale rules控制。另请参阅Using Pipes：

日期和货币管道需要ECMAScript国际化API。 Safari和其他旧版浏览器不支持它。我们可以使用polyfill添加支持。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

引擎盖CurrencyPipe delegates formatting to new 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格式化货币涉及：

使用正确的区域设置。请参阅this on how to replace the default locale，但这仅适用于测试，因为用户应在操作系统设置中设置正确的区域设置。
使用旧版浏览器的polyfill。

Answer 3

这正在工作（角度6）在html端：

{{ amount | currency: 'EUR':'symbol':undefined:'fr-FR' }}

在打字稿方面：

const number = 123456.789;
console.log(new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(number));

123.456,79€

Answer 4

我一直在寻找这个答案，当前的angular版本可以为本地化和默认货币代码定义提供程序。

喜欢这个。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID, DEFAULT_CURRENCY_CODE } from '@angular/core';

import localePt from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';

// Register the localization
registerLocaleData(localePt, 'pt-BR');

@NgModule({
  declarations: [
    AppComponent,
    NotificationListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'pt-BR'
     },
     {
       provide: DEFAULT_CURRENCY_CODE,
       useValue: 'BRL'
     },
    DataService,
    NotificationsService,
    GeoLocationService,
  ],
  entryComponents: components,
})

完成后，使用非常简单：

<div class="col-12" *ngIf="isContentInsurance.value">
     <h5 class="pull-left">Gst</h5>
     <span class="pull-right">-{{offers.contentInsurance | currency}}</span>
</div>

不必创建任何自定义管道或其他自定义操作。

Answer 5

老实说，我找不到任何内置方式来做到这一点。因此创建了名为拆分的自定义管道。

工作演示：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 6

提供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 7

这样做：

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

不需要额外的管道，它使用默认的货币管道

Answer 8

我只是不想在本地使用'fr'，所以：

import { PipeTransform} from '@angular/core';
import { Pipe } from '@angular/core';
import {CurrencyPipe} from '@angular/common';

    @Pipe({ name: 'myCurrency' })
    export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform {
    
      transform(value: any, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null {
         let result = super.transform(value, currencyCode, display, digitsInfo, locale);
         if (result.charAt(0)==='₽' || result.charAt(0)==='$' ){
           result = result.substr(1)+' ' +result.substr(0,1);
         }else if(result.substr(0,3)==="TJS" || result.substr(0,3)==="RUB"){
           result = result.substr(3) +" "+result.substr(0,3)
         }
         if ( Number(value) >0 ){
           result = "+ "+ result
         }else{
           result = "- "+ result
         }
         return result;
      }

}

如何在Angular中向右显示货币符号

8 个答案: