1. 前言
在国际化的过程中，常常需要在不同的语言版本中显示不同的路由路径。为了实现这一需求，开发人员可以使用 @ngx-i18n-router/http-loader 这个 npm 包。本文将详细介绍如何使用这个包来进行前端国际化开发。
2. 安装 @ngx-i18n-router/http-loader
首先，需要使用 npm 安装 @ngx-i18n-router/http-loader 这个包。可以使用以下命令进行安装：
npm install @ngx-i18n-router/http-loader --save
3. 使用 @ngx-i18n-router/http-loader
3.1 引入依赖
在需要使用 @ngx-i18n-router/http-loader 的地方，首先需要引入相关依赖：
import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { I18nRouterLoader } from '@ngx-i18n-router/http-loader';
// more imports3.2 使用 I18nRouterLoader
I18nRouterLoader 是 @ngx-i18n-router/http-loader 的核心类，需要在应用启动时实例化它。在 app.module.ts 中，注入 HttpClient 和使用 I18nRouterLoader：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -------------------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- --- ----------------------- ------ ------
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- --这里在 TranslateModule 中引入了一个 loader，可以将 I18nRouterLoader 作为 useFactory 的参数传入，并在 deps 中注入 HttpClient。I18nRouterLoader 的第一个参数是允许的语言类型，第二个参数是 HttpClient。
3.3 设置当前语言版本
应用在启动时使用 I18nRouterLoader，但它并不知道应该将哪一个语言版本设置为当前语言。因此需要手动设置当前语言版本。在 app.component.ts 中，注入 TranslateService 和 Router：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------ - ------ - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ---------- ----------------- ------- ------- ------- --
----- - ------
---------- -
------------------------------------
-------------------------
-----------------------------
-
---------------- ------- -
-------------------------
-----------------------------
-
-在 ngOnInit() 中先设置默认语言为英文，然后跳转到 /en 这个路由。在 changeLang() 中，可以根据用户的选择来设置当前语言版本。
3.4 在路由中设置语言的 URL Segments
I18nRouterLoader 已经在启动时被配置，但路由的 URL 还没有被设置语言的 URL Segments。需要在 app-routing.module.ts 中设置路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - ---------------- - ---- ---------------------- ----- ------- ------ - - - ----- --- ----------- ----- ---------- ------ -- - ----- -------- ---------- -------------- --------- -- - -- ----------- -------- ------------------------------- -------- --------------- ---------- ------------------ -- ------ ----- ---------------- --
这里将路由模块引入并在配置中添加语言的 URL Segments。
3.5 使用翻译语言
现在，所有的设置工作都已经完成了，可以使用翻译语言了。在需要使用翻译语言的 HTML 页面中，使用以下语句：
{{ 'HELLO' | translate }}这里的 HELLO 是在翻译文件中定义的一个 key。
3.6 添加翻译文件
在 assets/i18n/ 目录下创建翻译文件，如下：
{
"HELLO": {
"en": "Hello, world! This is English!",
"fr": "Bonjour le monde! Ceci est français!"
}
}这里定义了一个 HELLO 的 key，分别对应着英语和法语两种语言。
3.7 示例代码
为了更好地理解 @ngx-i18n-router/http-loader 的使用方法，以下是一个完整的示例代码：
app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------ - ------ - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ---------- ----------------- ------- ------- ------- --
----- - ------
---------- -
------------------------------------
-------------------------
-----------------------------
-
---------------- ------- -
-------------------------
-----------------------------
-
-home.component.ts
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
----- -------
------------------- ------ --------------- ------- ---------- ----------------- --
---------- -
--------- - -----------------------------------------
------------------------------------
------------------------------
-
-app.module.ts
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -------------------------------
------ - ---------------- --------------- - ---- ----------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
-----------
------------- -------------- ---------------
-------- -
--------------
-----------------
-------------------------
------- -
-------- ----------------
----------- ------ ----------- -- --- ----------------------- ------ ------
----- ------------
-
--
--
---------- ---
---------- --------------
--
------ ----- --------- --app-routing.module.ts
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - ---------------- - ---- ---------------------- ----- ------- ------ - - - ----- --- ----------- ----- ---------- ------ -- - ----- -------- ---------- -------------- --------- -- - -- ----------- -------- ------------------------------- -------- --------------- ---------- ------------------ -- ------ ----- ---------------- --
home.component.html
<h1>{{ 'HELLO' | translate }}</h1>assets/i18n/en.json
{
"HELLO": {
"en": "Hello, world! This is English!",
"fr": "Bonjour le monde! Ceci est français!"
}
}assets/i18n/fr.json
{
"HELLO": {
"en": "Hello, world! This is English!",
"fr": "Bonjour le monde! Ceci est français!"
}
}4. 总结
@ngx-i18n-router/http-loader 这个 npm 包可以让开发人员在前端完成路由的国际化，让用户可以在不同的语言版本中获得更好的使用体验。本文详细介绍了该包的使用方法，并提供了一个完整的示例代码。希望读者能够通过本文的介绍，快速掌握 @ngx-i18n-router/http-loader 包的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056eb181e8991b448e7766