Angular项目切换阿拉伯语时强制保留英文数字的方案求助

针对Angular项目设置lang="ar"后数字自动转为阿拉伯文的问题，以下是几个无需逐个处理动态内容的高效解决方案：

方案1：切换到使用西方数字的阿拉伯语区域设置 #

Angular的本地化基于Intl API，不同阿拉伯语子区域的数字格式默认存在差异：ar locale默认使用阿拉伯文数字，而ar-EG（埃及阿拉伯语）等子区域默认使用西方数字。将项目的LOCALE_ID配置为ar-EG，既能保持阿拉伯语的文本方向和翻译内容，又能全局让数字显示为英文格式，无需修改任何动态内容代码。

配置示例（app.module.ts）：

import { LOCALE_ID, NgModule } from '@angular/core';

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

方案2：全局覆盖数字格式化逻辑 #

若必须使用ar locale，可通过自定义服务替换Angular默认的数字格式化行为，强制输出英文数字：

1. 创建自定义格式化服务：

import { Injectable, LOCALE_ID, Inject } from '@angular/core';
import { NumberFormatter } from '@angular/common';

@Injectable()
export class EnglishNumberFormatter extends NumberFormatter {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  override format(value: number, options?: Intl.NumberFormatOptions): string {
    // 强制使用英文数字格式
    return new Intl.NumberFormat('en-US', options).format(value);
  }
}

2. 在模块中替换默认服务：

import { NumberFormatter } from '@angular/common';
import { EnglishNumberFormatter } from './english-number-formatter.service';

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'ar' },
    { provide: NumberFormatter, useClass: EnglishNumberFormatter }
  ]
})
export class AppModule { }

该方案会让所有依赖Angular内置格式化的数字（包括number管道输出）统一使用英文数字，动态场景无需额外处理。

方案3：CSS全局兼容（依赖字体支持） #

如果项目使用的阿拉伯语字体支持OpenType特性，可通过全局CSS强制启用西方数字显示：

body {
  font-feature-settings: "tnum"; /* 启用tabular数字，即西方数字格式 */
}

注意：此方法依赖字体兼容性，若字体不支持该特性则无效，但无需修改代码，适合快速验证。

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