angular - 如何在Angular中将货币符号显示在右侧

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

这在 html 端有效（角度 6）：

{{ 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 欧元</p>

Answer 3

我一直在寻找这个答案，并且当前版本的 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 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>

Answer 5

老实说，我找不到任何内置的方法来做到这一点。因此创建了名为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 6

我只是不想使用'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;
      }

}

Answer 7

对于 Angular12，你应该在你的模块中导入它

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);

在您的提供者部分

{
      provide: LOCALE_ID,
      useValue: 'de-DE'
}

你可以这样使用

{{ price | currency:'EUR'}}

结果会是这样

    139,00 €

Answer 8

像这样做：

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

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