在 Angular 项目中使用语言国际化-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 项目中使用语言国际化

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

随着全球化的发展，越来越多的网站需要支持多语言服务，而 Angular 提供了一种简单方便的方式来处理应用程序中的国际化。在本文中，我们将介绍如何在 Angular 项目中使用语言国际化。

翻译实现

翻译实现的过程中，我们需要安装 ngx-translate/core 和 ngx-translate/http-loader 依赖，分别负责提供核心功能和从服务端获取翻译文件。使用以下命令来安装这两个依赖。

--- ------- ------------------- -------------------------- ------

安装完成之后，我们需要配置 AppModule:

------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
------ - ----------------- ---------- - ---- -----------------------

------ - ------------ - ---- ------------------

-----------
  ------------- ---------------
  -------- -
    --------------
    -----------------
    -------------------------
      ------- -
        -------- ----------------
        ----------- ------------------
        ----- -------------
      --
    ---
  --
  ---------- ---------------
--
------ ----- --------- --

------ -------- ----------------------- ----------- -
  ------ --- --------------------------
-

在 AppModule 中，我们首先需要导入与国际化相关的所有模块和组件。接下来，我们通过调用 HttpLoaderFactory 函数来创建一个新的翻译文件加载器。该函数将在 Http 上下文中返回一个新的 TranslateHttpLoader 实例。

接下来，我们还需要在 AppModule 中导入 HttpClientModule 模块，以便我们可以从远程服务器获取翻译文件。最后，我们通过调用 TranslateModule.forRoot() 函数来告诉 Angular 如何使用我们新创建的翻译文件加载器。

我们还需要创建一个翻译文件，该文件将存储应用程序中使用的所有文本。在常见的 Angular 项目中，我们可以将所有文本存储在 assets/i18n/ 目录中，例如:

-
-- -------------
-- ----
- -- ----
- -- -------
- - -- -----
- - - -- -------
- - - -- -------
- - - -- -------
- - -- ---
- -- -------------
- -- ---
- -- ----------
- -- ------- 
- -- ---

在这个目录下，我们应该有多个包含翻译信息的文件。例如 en.json 就可以这样写：

-
  ------ --------
-

其中，key 为我们在程序代码中使用的键值，而 value 则为该键值对应的翻译内容。

在这里，我们需要注意：这里的 en.json 中的“en”是指“英语”，如果我们使用其他语言，则需要更改其名称。我们还需要确保使用与 AppModule 中 Loader 函数返回的 TranslateHttpLoader 实例相匹配的文件名。

在 HTML 模板中使用翻译

我们已经配置了 ngx-translate/core 和 ngx-translate/http-loader，现在我们可以开始使用它们来使 HTML 模板支持多语言。

首先，我们需要在 HTML 模板中引入 TranslateService 该服务。

------ - ---------------- - ---- ----------------------

然后，我们可以将该服务注入到我们的组件中。

------------------ ---------- ----------------- --

最后，我们可以使用 translate 服务在 HTML 模板中渲染翻译内容。

------ ------------- - --------- -------

在这里，我们使用管道 | translate ，它告诉 Angular 应用程序执行翻译操作。例如，使用 translate.instant('key') 可以在代码中获取翻译内容。

切换语言

我们已经使用 $translate 服务在我们的 HTML 模板中渲染了翻译内容，现在我们需要一个方法来切换语言。

首先，在我们的组件中，我们需要导入 TranslateService 服务，并注入到构造函数中。

------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------

------------
  --------- -----------
  ------------ -----------------------
--
------ ----- ------------ -
  ------------------- ---------- ----------------- --

  ------------------------ ------- -
    -----------------------------
  -
-

这里，我们通过调用 use() 函数来改变应用程序的当前语言。该函数需要接受一种有效的语言代码作为参数，例如 en、fr 或 zh。

接下来，在我们的 HTML 模板中，我们需要使用按钮或其他用户接口元素，以便用户可以切换应用程序的语言。

------- ------------------------------------------
------- ------------------------------------------
------- ------------------------------------------

这里，我们将 switchLanguage() 函数作为元素的处理程序来绑定到每个按钮中。当用户单击按钮时，该函数将调用并改变当前语言。

结论

在这篇文章中，我们学习了如何在 Angular 项目中使用 ngx-translate/core 和 ngx-translate/http-loader 依赖，以实现多语言翻译。通过遵循上述步骤，我们可以在 Angular 应用程序中轻松实现语言国际化，让我们的应用程序支持各种不同的语言和文化。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6715b8c0ad1e889fe218993e