如何在 angular 2.0 中为数字设置语言环境

Question

瑞士德语的数字格式类似于“100'000.00”（而不是“100,000.00”）。我该如何改变它？我尝试将 number_pipe.js 中的设置从 en-US 更改为 de-CH 但没有成功。

var defaultLocale: string = 'de-CH';

是否有解决方法或者我是否必须实施自己的管道？

Answer 1

尝试使用 locale-number.pipe.ts 或

您可以基于 NumeralJs 创建一个简单的管道来格式化数字

https://github.com/adamwdraper/Numeral-js

Answer 2

如果您的应用只需要一种语言环境，您现在可以（@angular ~2.4.0）在@NgModule 中注册语言环境提供程序。

@NgModule({
    ...
    providers: [
        {provide: LOCALE_ID, useValue: "de-CH"}
    ]
})
export class AppModule {}

Answer 3

以下是我的解决方案，它会对某人有所帮助。

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

@Pipe({
  name: 'amountConverter'
})
export class AmountConverterPipe implements PipeTransform {

  transform(value: number | string, locale?: string): string {
    return new Intl.NumberFormat(locale, {
      minimumFractionDigits: 2
    }).format(Number(value));
  }

}

在html中可以使用如下

 <span class="strong">{{Price  | amountConverter:locale}}</span>

数字格式会根据语言环境的值而变化。

详情请参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat。

Answer 4

对我来说最好的选择是著名的 https://www.npmjs.com/package/numeral 包。（他使用与 moment.js 相同的逻辑）

要安装它：npm i numeral@2.0.6 类型 npm i --save-dev @types/numeral@0.0.22

在您的 ts 文件中，您可以按如下方式使用：

`R$ ${numeral(<your-model-value>).value().toLocaleString()}`

对于 HTML 模板，您可以像这样创建 Pipe：

import {Pipe, PipeTransform} from '@angular/core';
import * as numeral from 'numeral';

@Pipe({
  name: 'numberLocale'
})
export class NumberLocalePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    const numeralNumber = numeral(value);

    return numeralNumber.value().toLocaleString();
  }
}

此外，对于货币（和区域设置），一个好的策略是使用包 ng2-currency-mask 作为 HTML 中的货币 masks（但在 ts 文件上，您可能应该 "translate" 在保存模型对象之前使用 numeral 模型中的绑定值。

在 HTML 模板上使用 ng2-currency-mask：

<input [(ngModel)]="model.value"
   [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"
   allowNegative="false" currencyMask>

并在 ts 之前保存模型：

if(this.model.value)
   this.model.value = numeral(this.model.value).value();

https://github.com/cesarrew/ng2-currency-mask

如何在 angular 2.0 中为数字设置语言环境

How to set locale for numbers in angular 2.0

locale

numbers

angular2-pipe

angular