背景
在开发多语言应用程序时，我们需要确定如何处理多语言文本的存储和显示。如果不正确地处理，这可能会导致用户界面中出现语言错误和不一致。Angular 是一个流行的前端框架，它提供了一些功能，可以帮助开发人员处理多语言应用程序。
准备工作
在开发多语言应用程序之前，需要做一些准备工作。首先，需要确定应用程序支持的语言。其次，需要收集和翻译所有文本资源，并生成以语言为基础的文件。最后，需要在应用程序中添加多语言支持。
添加 i18n 功能
在 Angular 应用程序中添加多语言支持可以通过 i18n 来实现。i18n 是国际化的缩写，表示将应用程序适应不同的语言和文化的过程。使用 i18n，可以将文本资源从应用程序源代码中分离出来。它允许您在本地化时更改文本资源，而不需要更改源代码。
在 Angular 应用程序中，可以使用 Angular CLI 命令行工具来创建具有 i18n 支持的新项目：
-- --- ------ ------
这个命令将在项目中添加一个 i18n 标记，并生成一个 messages.xlf 文件，该文件用于存储本地化文本。
本地化文本
在 messages.xlf 文件中，可以添加本地化的文本资源，这些资源以翻译的目标语言为基础。每个文本资源都有一个 ID（msgid）和一个翻译后的文本（msgstr）。
例如，下面的代码为 ID 为 hello 的文本资源添加了英语和法语的翻译：
----------- ----------- ---------------------- ------------------------ ---------------------- -------------
可以使用 Angular CLI 命令行工具来将本地化文本添加到 messages.xlf 文件中：
-- ----- ------------- ------
这会生成一个名为 messages.xlf 的文件，并将其保存在项目的 locale 文件夹中。
在组件中使用本地化文本
在组件中使用本地化文本很简单。首先，需要在组件中导入 i18n 服务：
------ - ---------------- - ---- ----------------------
然后，在构造函数中注入 i18n 服务：
------------------- ---------- ----------------- - -
现在，可以在组件中使用翻译的文本：
---------------------------------------------- -- - ------------- - ------- ---
在这个例子中，翻译服务使用 ID 为 hello 的本地化文本资源来获取翻译文本。一旦获得翻译文本，就可以在组件中使用它。
改变应用程序的语言
最后，需要提供一种方法，让用户选择应用程序的语言。这可以通过在应用程序中注入 i18n 服务，并使用该服务的 use 方法来实现：
------------------- ---------- ----------------- - ------------------------- -
在这个例子中，将应用程序的语言设置为法语。
结论
使用 Angular 应用程序开发多语言支持需要做一些准备工作和几个步骤。首先，需要确定应用程序需要支持的语言。其次，需要准备本地化文本，并使用 i18n 将其添加到项目中。最后，需要在组件中使用 i18n 服务来获取翻译文本，并提供一种方法让用户选择应用程序的语言。了解这些概念可以帮助您构建出色的多语言应用程序。
完整示例代码可以在 GitHub 上找到：https://github.com/ngx-translate/core。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672c756eddd3a70eb6d84088