文档

初始设置

首先将 Angular 的本地化包添加到您的项目中：

ng add @angular/localize

该命令将进行以下更改：

• 将@angular/localize包添加到您的依赖项中
• 将“@angular/localize/init”添加到angular.json中的polyfills数组中
• 将以下引用添加到您的 main.ts 中：

/// <reference types="@angular/localize" />

它还会将 extract-i18n 配置添加到 angular.json 中：

"extract-i18n": {
  "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
  "options": {
    "buildTarget": "your-app:build",
    "format": "xlf",
    "outputPath": "src/locale",
    "includeContext": true,
    "resetTranslationState": true,
    "targetFiles": [
      "messages.fr.xlf",
      "messages.vi.xlf"
    ]
  }
}

注意：我们将在配置中稍后修改 outputPath 以匹配我们的工作流程。

Angular i18n CLI Tool

To simplify the management of Angular i18n configuration, you can use our CLI tool:

npm install --save-dev @softwarity/angular-i18n-cli

This tool provides several features to streamline your i18n workflow:

• Easy initialization of i18n configuration in your Angular project
• Simple addition and removal of locales
• Automatic configuration of build settings for each locale
• Proper setup of XLIFF file formats

安装翻译工具

用于管理翻译文件，我们将使用 ng-extract-i18n-merge，它简化了提取和合并翻译的过程：

npm install --save-dev ng-extract-i18n-merge

此工具提供了几个优势：

• 自动提取您应用程序中的可翻译字符串
• 将新翻译与现有翻译合并为一步完成
• 在更新过程中保留现有翻译
• 支持多种目标语言

配置文件

"scripts": {
  ...
  "extract-i18n": "ng extract-i18n",
  "build": "ng build --localize"
  ...
}

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": {
      "translation": "src/locale/messages.fr.xlf"
    },
    "vi": {
      "translation": "src/locale/messages.vi.xlf"
    }
  }
},

"extract-i18n": {
  "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
  "options": {
    "buildTarget": "your-app:build",
    "format": "xlf",
    "outputPath": "src/locale",
    "includeContext": true,
    "resetTranslationState": true,
    "targetFiles": [
      "messages.fr.xlf",
      "messages.vi.xlf"
    ]
  }
}

"architect": {
  "build": {
    "configurations": {
      "fr": {
        "localize": ["fr"]
      },
      "vi": {
        "localize": ["vi"]
      }
    }
  }
}

准备组件以进行翻译

<tag attribute="This is a sample attribute text that needs translation." 
  i18n-attribute="@@ATTRIBUTE_TEXT"
  i18n="@@TAG_TEXT">This is a sample text that needs translation.</tag>
// EXAMPLE
<button title="Title button" i18n-title="@@TITLE_BUTTON"i18n="@@LABEL_BUTTON">label button</button>

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

@Component({
  selector: 'app-example',
  template: '...'
})
export class ExampleComponent {
  title = $localize`:@@PAGE_TITLE:Welcome to our application`;
  errorMessage = $localize`:@@ERROR_MESSAGE:An error occurred while processing your request`;
}

构建和提供

npm run build

ng build --configuration=fr

ng serve --configuration=fr