Angular 7项目如何实现TypeScript文件的i18n国际化翻译？

Angular 7 自带的原生 i18n 能力默认仅支持模板（.html）文件翻译，没有官方内置的 .ts 文件翻译支持，但你不需要强制升级到 Angular 9 即可实现需求，有以下两种可行方案：

方案一：和原生 i18n 体系对齐的自定义封装 #

该方案不需要引入第三方依赖，可完全复用你现有 i18n 的翻译资源，和现有模板翻译体系保持一致：

• 第一步：整理翻译映射表，你可以写个简易脚本直接从现有 xlf/xmb 翻译文件中提取翻译内容，按语言分类存储，资源 ID 和模板中使用的 i18n ID 完全对齐
• 第二步：封装全局翻译服务，示例代码如下：

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

// 翻译内容可单独抽离为按语言分类的独立ts文件，方便脚本自动更新
const TRANSLATION_RESOURCE = {
  'ja': {
    'common.submit': '送信',
    'common.cancel': 'キャンセル',
    'tip.userNotFound': 'ユーザーが存在しません'
  },
  'zh-CN': {
    'common.submit': '提交',
    'common.cancel': '取消',
    'tip.userNotFound': '用户不存在'
  }
};

@Injectable({ providedIn: 'root' })
export class I18nService {
  // 若使用AOT编译（Angular7生产环境默认开启），LOCALE_ID会自动对应编译时指定的语言
  constructor(@Inject(LOCALE_ID) private activeLocale: string) {}

  t(translationKey: string, placeholders?: Record<string, string | number>): string {
    const targetText = TRANSLATION_RESOURCE[this.activeLocale]?.[translationKey] || translationKey;
    // 处理占位符替换
    if (placeholders) {
      return Object.entries(placeholders).reduce((text, [key, value]) => {
        return text.replace(`{{${key}}}`, String(value));
      }, targetText);
    }
    return targetText;
  }
}

• 第三步：在需要翻译的 ts 文件中注入该服务，调用t方法即可获取对应翻译内容

方案二：使用兼容 Angular 7 的 @angular/localize 版本 #

社区有适配 Angular 7 的 @angular/localize 降级兼容包，安装后用法和 Angular 9+ 官方版本基本一致，不需要自己封装翻译逻辑，可直接使用$localize语法标记 ts 中需要翻译的内容，和官方生态对齐。

升级到 Angular 9+ 的说明 #

如果你后续有大量国际化需求，或是需要使用更多 Angular 新特性，升级到 Angular 9 及以上版本是最优解，官方原生支持 @angular/localize，可同时覆盖模板和 ts 文件的翻译场景，有完整的官方工具链支持翻译资源的提取、合并、校验，不需要额外做自定义适配。 #

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