Angular 2：如何根据用户所在地获取对应货币显示值

嘿，我刚好踩过类似的坑，这其实是Angular本地化配置的小问题——默认的currency管道只加载了英文（美国）的本地化数据，所以只会显示$。要实现根据用户地区自动切换€、¥，可以按以下步骤来搞定：

1. 导入并注册所需的本地化语言包 #

Angular默认只自带en-US的本地化数据，我们需要手动导入中文（中国）和欧元区（比如法国/德国）的本地化包，然后注册到项目里：

在你的根模块（比如app.module.ts）中添加代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
// 导入中文（中国）本地化数据
import zhCN from '@angular/common/locales/zh-CN';
// 导入法语（法国）本地化数据（欧元区通用，也可以换成de-DE、es-ES等）
import frFR from '@angular/common/locales/fr-FR';

// 注册本地化数据，让Angular能识别这些地区规则
registerLocaleData(zhCN);
registerLocaleData(frFR);

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 根据用户地区自动切换Locale #

接下来我们要获取用户的浏览器语言环境，然后在currency管道中指定对应的locale参数，就能自动显示对应地区的货币符号了：

在你的业务组件里：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <!-- 参数说明：货币代码（undefined用locale默认）、显示方式（symbol显示符号）、小数位数（1.0-0表示整数）、用户locale -->
    <p>{{ listing.sellPrice | currency : undefined : 'symbol' : '1.0-0' : userLocale }}</p>
  `
})
export class AppComponent {
  userLocale: string;
  // 替换成你自己的listing业务数据
  listing = { sellPrice: 299 };

  constructor() {
    // 获取浏览器语言设置，中国用户一般返回'zh-CN'，法国用户返回'fr-FR'
    this.userLocale = navigator.language;

    // 可选兼容处理：欧洲其他欧元区语言默认映射到fr-FR（确保显示欧元符号）
    const euroLocales = ['de-DE', 'es-ES', 'it-IT', 'nl-NL'];
    if (euroLocales.includes(this.userLocale)) {
      this.userLocale = 'fr-FR';
    }
  }
}

3. （可选）精准映射货币代码 #

如果担心某些locale的默认货币不符合预期（比如部分欧洲国家不用欧元），可以手动指定货币代码，确保符号完全准确：

修改组件模板：

<p>{{ listing.sellPrice | currency : getTargetCurrency(userLocale) : 'symbol' : '1.0-0' : userLocale }}</p>

然后在组件中添加映射方法：

getTargetCurrency(locale: string): string {
  switch(locale) {
    case 'zh-CN':
      return 'CNY'; // 强制人民币
    case 'fr-FR':
    case 'de-DE':
    case 'es-ES':
      return 'EUR'; // 强制欧元
    default:
      return 'USD'; // 默认美元
  }
}

这样就能完美实现需求：中国用户看到¥，欧洲用户看到€，其他地区默认显示$啦！

内容的提问来源于stack exchange，提问作者Ipromise