越来越多的网站和应用程序需要支持多种语言，为了更好地服务于全球用户，Angular 提供了一些便捷的方式来支持多语言。在本教程中，我们将介绍如何使用 Angular 实现多语言支持，并提供示例代码以供参考。
国际化（i18n）概述
在多语言应用程序中，最重要的功能之一就是国际化（i18n）。国际化是将一个应用程序适配到不同地区和语言的过程，包括翻译 UI 元素，日期、时间等格式，数字和货币等等。在 Angular 中，我们可以使用标准的 HTML 和 Angular 模板来设计多语言应用程序并完成国际化。
Angular 的 i18n 支持
Angular 为我们提供了一些便利的工具来帮助我们在应用程序中实现多语言支持。这些工具包括：
- i18n 指令：可以在 HTML 中使用以识别需要翻译的文本。
- i18n 块：可以将一段文本定义为用于翻译的块，同时也可以定义不同的属性，如消息 ID、上下文、注释等。
- $localize：是一个能够处理应用程序中的所有翻译的 API，可以通过该 API 来获取翻译结果。
实现多语言支持的步骤
接下来，我们将介绍如何使用 Angular 实现多语言支持的步骤。在下面的示例中，我们将支持三种语言：英语、法语和西班牙语。
第一步：设置区域设置
我们需要在应用程序中设置区域设置（locale）和语言环境（language）。在 Angular 中，我们可以使用 LOCALE_ID 和 TRANSLATIONS 表示区域设置和语言环境。
我们可以在 app.module.ts 文件中设置语言环境：
import { LOCALE_ID } from '@angular/core'; @NgModule({ providers: [ { provide: LOCALE_ID, useValue: 'en-US' } // 默认设为英语 ] }) export class AppModule { }
第二步：配置翻译文件
我们需要为每种语言定义一个翻译文件（.xlf 格式），并在 angular.json 文件中配置语言环境。这些翻译文件将包含每个需要翻译的文本字符串，以及它们的 ID。
在 angular.json 文件中，我们可以使用 projects -> <project-name> -> i18n 部分来配置应用程序中支持的语言和翻译文件。下面是一个示例：
-- -------------------- ---- ------- ----------- - --------- - ------- - ---------- - ----- - -------------- ---------------------------- -- ----- - -------------- ---------------------------- -- ----- - -------------- ---------------------------- - - - - -展开代码
第三步：标记需要翻译的文本
我们可以在 HTML 中使用 ng-container 和 i18n 指令来标记需要翻译的文本。以下是一个示例：
<ng-container i18n="@@welcome"> Welcome to my app! </ng-container>
在这个示例中，i18n="@@welcome" 表示该文本是需要翻译的。i18n 指令将这个文本标识为一个翻译块，并将其 ID 设置为 "welcome"。该 ID 将在翻译文件中使用。
第四步：生成和提取翻译文件
我们可以使用 Angular 的 ng xi18n 命令来生成翻译文件。例如，要为英语生成一个翻译文件，我们可以使用以下命令：
ng xi18n --outputPath=locale --locale=en
这将生成一个名为 messages.en.xlf 的翻译文件，该文件包含所有需要翻译的字符串和 ID。
我们还可以使用 ng extract-i18n 命令将当前应用程序的所有翻译块提取到一个新的翻译文件中。例如，要提取所有文本并将其保存为 messages.xlf 文件，我们可以使用以下命令：
ng extract-i18n --output-path=locale --out-file=messages.xlf
第五步：使用 Angular 的 $localize API 进行翻译
最后，我们可以在组件或服务中使用 $localize API 来获取翻译结果。以下是一个示例：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------- - ---- -------------------- ------------ --------- ----------- --------- - ------ ----- - --------- ------- - -- ------ ----- ------------ - ----- - ---------------------------- -- -- ------ -展开代码
在这个示例中，$localize API 返回一个翻译结果，我们使用 @@welcome 作为翻译块的 ID，并提供了一个默认字符串 "Welcome to my app!"。
结论
在本教程中，我们介绍了使用 Angular 实现多语言支持的步骤。我们使用了 i18n 指令、i18n 块和 $localize API 等 Angular 工具，并提供了示例代码以供参考。通过本教程，您现在应该更加理解如何在 Angular 应用程序中实现多语言支持，以满足全球用户的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770d798e9a7045d0d81e4d9
