使用@angular/localize能否实现Angular运行时语言翻译？

Angular 13及以上版本原生支持运行时翻译能力，无需引入ngx-translate等第三方库即可实现与第三方库等效的动态切换语言、运行时加载翻译包的效果。

1. 项目基础配置 #

首先在项目的angular.json中开启i18n配置，指定源语言、本地化文件路径等：

• 找到projects > [你的项目名] > i18n节点，添加如下配置

"i18n": {
  "sourceLocale": "zh-CN",
  "locales": {
    "en-US": "src/locale/messages.en.xlf",
    "ja-JP": "src/locale/messages.ja.xlf"
  }
},

• 在build > options中添加"localize": true，让Angular打包时识别i18n相关内容

2. 模板与代码中标记需要翻译的内容 #

• 模板中使用i18n属性标记静态内容：

<p i18n="页面欢迎语|首页顶部展示的欢迎文本@@welcomeText">欢迎来到我的应用</p>

• 代码逻辑中需要翻译的动态内容，使用$localize全局方法标记：

const successTip = $localize`:操作成功提示|表单提交成功后弹出的提示@@submitSuccess:提交成功`;

3. 提取翻译文件并填入多语言内容 #

执行Angular CLI的提取命令：
ng extract-i18n
执行后会在你配置的src/locale目录下生成对应语言的xlf翻译文件，在每个<target>标签中填入对应语言的翻译内容即可。

4. 实现运行时加载与切换逻辑 #

4.1 封装多语言服务 #

创建I18nService，核心逻辑是动态加载对应语言的翻译文件，调用Angular原生的loadTranslations方法加载翻译资源，再触发页面重渲染更新内容：

import { Injectable } from '@angular/core';
import { loadTranslations, setLocale } from '@angular/localize';

@Injectable({ providedIn: 'root' })
export class I18nService {
  currentLocale = 'zh-CN';

  // 加载翻译资源
  async loadLocale(locale: string) {
    // 这里可以用动态import或者http请求加载对应语言的翻译json/xlf文件
    const translations = await import(`../../locale/${locale}.json`);
    loadTranslations(translations.default);
    setLocale(locale);
    this.currentLocale = locale;
    // 可以结合ApplicationRef.tick()或者路由重定向触发全页内容刷新
  }
}

注意：你可以提前把xlf格式的翻译文件转为简单的key-value结构的JSON文件，方便运行时加载解析。

4.2 切换语言调用 #

需要切换语言的时候直接调用服务方法即可：

switchLang(locale: string) {
  this.i18nService.loadLocale(locale);
}

• Angular原生运行时i18n的翻译key对应你标记翻译时添加的@@后面的唯一ID，注意不要重复
• 如果是Angular 13以下的版本，确实没有原生运行时翻译能力，建议升级版本或者临时使用编译时多包构建的方案替代
• 动态内容翻译如果需要插值，直接按$localize的语法写插值变量即可，和ngx-translate的参数传递逻辑一致

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