如何在Angular中设置全局货币配置并在全应用复用？

方案一：通过全局区域配置默认货币 #

Angular的LOCALE_ID令牌可以用来设置全局区域规则，其中包含对应区域的默认货币类型。如果你的业务场景对应固定区域（比如印度用en-IN），直接配置这个令牌就能让原生currency管道自动使用对应货币格式。

具体步骤： #

1. 导入目标区域的语言数据并注册：

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
// 导入印度英语的区域数据（默认货币为INR）
import localeEnIn from '@angular/common/locales/en-IN';

registerLocaleData(localeEnIn);

2. 在根模块的providers中配置LOCALE_ID：

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'en-IN' }
  ]
})
export class AppModule { }

配置完成后，直接使用{{ 123 | currency }}就会自动渲染为INR格式，无需每次手动传入'INR'。

方案二：动态注入默认货币代码（适配API获取场景） #

如果需要从API动态拉取货币类型，可以通过自定义注入令牌，结合APP_INITIALIZER在应用初始化时获取数据，再传递给原生管道使用。

具体步骤： #

1. 定义一个注入令牌用于存储默认货币：

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

export const DEFAULT_CURRENCY = new InjectionToken<string>('DEFAULT_CURRENCY');

2. 在根模块中通过APP_INITIALIZER从API获取货币代码，并提供令牌：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// 初始化时从API拉取货币代码的工厂函数
function loadCurrency(http: HttpClient) {
  return () => http.get<string>('/api/get-default-currency')
    .toPromise()
    .then(currency => {
      // 可以把货币代码存在全局服务中，这里示例直接返回
      return currency;
    });
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadCurrency,
      deps: [HttpClient],
      multi: true
    },
    // 动态提供默认货币代码，依赖全局服务的话可以调整工厂逻辑
    {
      provide: DEFAULT_CURRENCY,
      useFactory: (currencyService: CurrencyService) => currencyService.defaultCurrency,
      deps: [CurrencyService]
    }
  ]
})
export class AppModule { }

3. 封装一个格式化服务，复用原生管道并自动传入默认货币：

import { Inject, Injectable } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
import { DEFAULT_CURRENCY } from './tokens';

@Injectable()
export class CurrencyFormatService {
  constructor(
    private currencyPipe: CurrencyPipe,
    @Inject(DEFAULT_CURRENCY) private defaultCurrency: string
  ) {}

  formatAmount(amount: number): string {
    return this.currencyPipe.transform(amount, this.defaultCurrency) || '';
  }
}

之后在组件中直接注入CurrencyFormatService调用formatAmount方法即可，不用再关心货币参数。

关于修改原生货币管道的说明 #

不建议直接修改Angular原生管道，因为框架内部代码属于私有实现，升级Angular版本时会覆盖你的修改，还可能引发全局兼容性问题。更稳妥的方式是通过上述两种方案，基于原生管道做扩展或全局配置。

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