在 Angular 应用程序中开发多语言支持-JavaScript中文网-JavaScript教程资源分享门户

背景

在开发多语言应用程序时，我们需要确定如何处理多语言文本的存储和显示。如果不正确地处理，这可能会导致用户界面中出现语言错误和不一致。Angular 是一个流行的前端框架，它提供了一些功能，可以帮助开发人员处理多语言应用程序。

准备工作

在开发多语言应用程序之前，需要做一些准备工作。首先，需要确定应用程序支持的语言。其次，需要收集和翻译所有文本资源，并生成以语言为基础的文件。最后，需要在应用程序中添加多语言支持。

添加 i18n 功能

在 Angular 应用程序中添加多语言支持可以通过 i18n 来实现。i18n 是国际化的缩写，表示将应用程序适应不同的语言和文化的过程。使用 i18n，可以将文本资源从应用程序源代码中分离出来。它允许您在本地化时更改文本资源，而不需要更改源代码。

在 Angular 应用程序中，可以使用 Angular CLI 命令行工具来创建具有 i18n 支持的新项目：

ng new my-app --i18n

这个命令将在项目中添加一个 i18n 标记，并生成一个 messages.xlf 文件，该文件用于存储本地化文本。

本地化文本

在 messages.xlf 文件中，可以添加本地化的文本资源，这些资源以翻译的目标语言为基础。每个文本资源都有一个 ID（msgid）和一个翻译后的文本（msgstr）。

例如，下面的代码为 ID 为 hello 的文本资源添加了英语和法语的翻译：

<trans-unit id="hello">
  <source>Hello</source>
  <target>Bonjour</target>
  <target>Aloha</target>
</trans-unit>

可以使用 Angular CLI 命令行工具来将本地化文本添加到 messages.xlf 文件中：

ng xi18n --output-path locale

这会生成一个名为 messages.xlf 的文件，并将其保存在项目的 locale 文件夹中。

在组件中使用本地化文本

在组件中使用本地化文本很简单。首先，需要在组件中导入 i18n 服务：

import { TranslateService } from '@ngx-translate/core';

然后，在构造函数中注入 i18n 服务：

constructor(private translate: TranslateService) { }

现在，可以在组件中使用翻译的文本：

this.translate.get('hello').subscribe((result) => {
  this.greeting = result;
});

在这个例子中，翻译服务使用 ID 为 hello 的本地化文本资源来获取翻译文本。一旦获得翻译文本，就可以在组件中使用它。

改变应用程序的语言

最后，需要提供一种方法，让用户选择应用程序的语言。这可以通过在应用程序中注入 i18n 服务，并使用该服务的 use 方法来实现：

constructor(private translate: TranslateService) {
  this.translate.use('fr');
}

在这个例子中，将应用程序的语言设置为法语。

结论

使用 Angular 应用程序开发多语言支持需要做一些准备工作和几个步骤。首先，需要确定应用程序需要支持的语言。其次，需要准备本地化文本，并使用 i18n 将其添加到项目中。最后，需要在组件中使用 i18n 服务来获取翻译文本，并提供一种方法让用户选择应用程序的语言。了解这些概念可以帮助您构建出色的多语言应用程序。

完整示例代码可以在 GitHub 上找到：https://github.com/ngx-translate/core。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672c756eddd3a70eb6d84088