Angular 11网站如何实现包含动态内容的多语言支持

方案一：Angular 官方原生 @angular/localize #

适配 Angular 原生生态，AOT 编译性能更好，适合不需要无刷新切换语言的场景

• 安装对应版本依赖
  执行命令：ng add @angular/localize@11，必须安装和 Angular 11 匹配的版本，避免编译报错
• 标记需要翻译的静态文本
  模板内的静态文本添加i18n属性：

  <h1 i18n="首页标题|欢迎用户的页面主标题@@homeWelcome">欢迎访问我们的站点</h1>
  

  TS 文件内的静态文本用$localize标记：

  const pageTitle = $localize`@@homeTitle`站点首页`;
  

• 提取与配置翻译文件
  执行命令ng extract-i18n，会生成标准 xlf 格式的翻译源文件，复制源文件重命名为对应语言版本（如messages.zh.xlf、messages.en.xlf），在对应文件内完成各语言翻译即可
• 动态内容适配
  • 后端返回的动态内容：提前和后端约定多语言返回结构，例如返回字段携带语言后缀title_zh、title_en，组件内根据当前激活语言取对应字段渲染
  • 前端生成的动态内容（如状态枚举、提示文案）：提前将枚举值对应的翻译完成标记，运行时根据值取对应翻译即可，示例：

    const statusTextMap = {
      success: $localize`操作成功`,
      failed: $localize`操作失败`,
      pending: $localize`处理中`
    }
    // 动态渲染时调用：statusTextMap[currentStatus]
    

• 打包配置
  在angular.json内配置不同语言的打包参数，可选择按语言打包为独立包，或配置运行时加载逻辑，切换语言后刷新页面即可生效

方案二：第三方库 ngx-translate #

灵活度更高，支持运行时无刷新切换语言，是国内 Angular 项目常用的多语言方案

• 安装匹配 Angular 11 的版本依赖
  执行命令：npm install @ngx-translate/core@13 @ngx-translate/http-loader@6
• 全局配置
  在AppModule内导入并初始化翻译模块：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpClientModule, HttpClient } from '@angular/common/http';
  import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  import { AppComponent } from './app.component';
  
  // 配置翻译文件加载路径
  export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 配置翻译文件
  在src/assets/目录下新建i18n文件夹，新增对应语言的 JSON 翻译文件，例如：
  zh.json

  {
    "home.welcome": "欢迎访问站点",
    "status.success": "操作成功",
    "user.greet": "你好，{{userName}}"
  }
  

  en.json对应配置英文翻译即可
• 静态文本使用
  模板内用管道渲染：

  <h1>{{ 'home.welcome' | translate }}</h1>
  

  TS 文件内用翻译服务调用：

  constructor(private translate: TranslateService) {
    // 初始化默认语言
    this.translate.setDefaultLang('zh');
    // 切换语言调用：this.translate.use('en')
    const title = this.translate.instant('home.welcome');
  }
  

• 动态内容适配
  • 后端返回动态内容：同官方方案，提前约定多语言字段结构，根据this.translate.currentLang取对应字段渲染
  • 前端动态枚举/状态：将枚举值对应翻译的 key 提前配置到翻译文件，渲染时拼接 key 即可：

    <span>{{ 'status.' + item.status | translate }}</span>
    

  • 带参数的动态内容：直接在翻译管道内传入参数即可：

    <span>{{ 'user.greet' | translate: {userName: currentUser.name} }}</span>
    

方案选择建议 #

• 如果不需要无刷新切换语言，优先选择官方@angular/localize方案，和 Angular 生态兼容性更高，打包体积更小
• 如果需要运行时无缝切换语言，自定义配置需求多，选择ngx-translate方案即可

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