什么是国际化
国际化 (i18n) 指将一个应用程序从一种语言转换为另一种语言的过程，包括将文本和其他资源从一种语言翻译成另一种语言，并提供针对使用不同语言用户的本地化体验。
在前端开发中，国际化通常是一项必备功能，因为它可以让你的应用程序更容易在不同的国家和地区推广和使用。
Angular 的国际化工具
Angular 是一个流行的 JavaScript 前端框架，它提供了一个内置的国际化库，可以轻松地将你的应用程序转换为其他语言。
该库提供了以下功能：
- 提供了一个翻译服务，可以将文本翻译成不同的语言
- 支持多种语言的转换
- 可以根据用户的偏好自动选择语言
- 可以轻松地更新翻译内容
- 可以自动检测浏览器的语言偏好
如何实现 Angular 国际化
Angular 的国际化库依赖于 Angular CLI。要在 Angular 应用程序中实现国际化，首先需要使用以下命令生成一个默认的语言文件：
-- ----- ------------- ----------
这个命令将生成一个名为 messages.xlf 的默认语言文件，它将位于 src/locale 中。你可以根据需要自定义该文件。
接下来，你需要在你的应用程序中使用翻译服务。你可以通过在 app.module.ts 中将 TranslateModule 导入到你的应用程序中来实现此功能：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ ----------------- ---------------- ---- ----------------------
------ --------------------- ---- -----------------------------
------ ------------------ ----------- ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- -
------ --- ------------------------- ----------------- ---------
--
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -其中，TranslateLoader 和 TranslateHttpLoader 是翻译服务的依赖项之一。它们可以从 @ngx-translate/http-loader 中导入。
还可以将翻译服务注入到组件中，并使用 translate 指令将文本翻译为其他语言。例如：
----- ------- ------- - --------- ------
在这种情况下，翻译服务将自动将 'Hello, world!' 翻译为选择的语言。
最佳实践
添加语言选择器
添加一个语言选择器，让用户可以手动选择他们偏好的语言。这可以通过导入 TranslateService 并在组件中使用以下代码实现：
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ------- ------- - --------- -------
------- ----------------------------------
------- ----------- ---- -- ------ ---------------
--------
---------
---------
--
---------- -----------------------
--
------ ----- ------------ -
----- - ------ ----- ----- ------
------------------- ---------- ----------------- -
-------------------------------
-
-------------------- ------- -
-------------------------
-
-在这里，我们创建了一个选择器，并提供了一个 langs 数组，它包含所支持的所有语言。我们还从 @ngx-translate/core 中导入了 TranslateService，并使用 use() 方法将所选语言设置为默认值。
使用变量
在多语言应用程序中，文本不仅可以直接翻译，还可以包含变量。例如，你可能想翻译以下文本：
------- ----- ---------
在这里，{{user}} 是一个变量。你可以通过在 app.module.ts 中配置一个 ValueProvider 对象来实现：
------ - --------- ------------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ ----------------- ---------------- ----------------- ---- ----------------------
------ --------------------- ---- -----------------------------
------ ------------------ ----------- ---- -----------------------
------ -------- ----------------------- ----------- -
------ --- --------------------------
-
----- ---------------------- --------------- - -
- -------- --------------- --------- -
--- -
------------- -------- ----- ----------
--
--- -
------------- ---------- -- ------ ----------
-
--
--
-----------
------------- -
------------
--
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
-
--
--
---------- -
---------------------
--
---------- --------------
--
------ ----- --------- - -在这个例子中，我们使用 ValueProvider 来注入我们的组件。我们也定义了所支持的所有语言。
我们还需要使用 TranslateService 将变量传递给指令。例如：
----- -------------- - ---------------- ------- ------
在这里，我们将 user 对象作为参数传递给 translate 指令，以获取 Welcome back, John! 的翻译。
结论
国际化是 Angular 中一个重要的功能，它可以让你的应用程序更容易地在世界各地推广和使用。使用 Angular 的国际化库可以轻松地将你的应用程序转换为其他语言。在实施国际化时，请确保使用最佳实践，例如使用语言选择器，同时支持变量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67380c9a317fbffedf0de84d