前言
在开发前端应用中，经常会使用路由来实现展示页面的功能。而在应用多语言的情况下，我们通常需要对应不同语言的页面地址。localize-router-http-loader 这个 npm 包就是帮助我们在 Angular 应用中实现多语言路由的工具，本篇文章将介绍如何使用这个包。
安装
该包依赖 angular、@ngx-translate/core 和 @ngx-translate/http-loader，需要先安装这些包，可以使用以下命令：
npm install @angular/core @ngx-translate/core @ngx-translate/http-loader localize-router-http-loader --save
配置
在
app.module.ts中导入包：-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------- ------ - ---- ------------------ ------ - ----------------------- --------------------- ------------------------- ----------------------- --------------------------- - ---- ------------------------------ ------ - ---------------- ---------------- ---------------- - ---- ---------------------- ------ - ----------------- ---------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- -- ------ -------- --------------------------- ----------- - ------ --- ------------------------------ ----------------- -------------- - ----------- -------- - -------------- ----------------- ----------------------------- ------------------------- ------- - -------- ---------------- ----------- ---------------------- ----- ------------- -- --- ------------------------------------ - ------- - -------- --------------- --------- ------------------------ ----- ------------------ --------- ------------------------ -- -------------- ----- ---------------- ----- -------------------- -- -- - ----- ---- - ------------------- ------ ------------------- - ------- - -------- -- --- -- ------------- -------------- -------------- ---------------- ---------- - - -------- ----------------------- --------- - ---------------- ----- -- -- ----------------------- -- ---------- --------------- -- ------ ----- --------- --在
app.component.ts中添加代码：-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - --------------------- - ---- ------------------------------ ------ - ------------ - ---- ------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ------------- ------------- ------------------- --------- ---------------------- -- ---------- - ----------------- - ------------------------------------------- - ------------- - -- ------------------- - -------------------------------- - - -这段代码的作用是监听语言变化事件并更新路由。
示例
我们假设有以下两种语言的页面：
- 英文版：
/en/home和/en/about - 中文版：
/zh-CN/home和/zh-CN/about
在 assets/i18n/ 文件夹下创建 en-lang.json 和 zh-CN-lang.json 两个翻译文件：
en-lang.json：
{
"home": "Home",
"about": "About"
}zh-CN-lang.json：
{
"home": "首页",
"about": "关于"
}在 app-routing.module.ts 中将路由改为多语言路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - -------------------- - ---- ------------------------------ ----- ------- ------ - - ------ --- ----------- -------- ---------- -------- ------ ------- ---------- --------------- ------ -------- ---------- --------------- -- ----------- -------- ---------------------------------------- -------- --------------- ---------- -- -- ------ ----- ---------------- - -
在组件中使用翻译：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ---------------- - ---- ---------------------- ------------ --------- ----------- ------------ ------------------------ ---------- ------------------------ -- ------ ----- ------------- ---------- ------ - ------------------- ---------- ----------------- - - ---------- - - -
html 中使用：
<h1>{{ 'home' | translate }}</h1>
<p>{{ 'about' | translate }}</p>深度解析
LocalizeRouterModule.forRoot(routes, options) 是创建本地化模块最重要的方法。它有两个参数：
routes: Angular 的原始路由配置options: 参数对象，其中 parser 是最重要的属性
parser 是本地化路由解析器。我们可以定义自己的解析器，需要实现 LocalizeParser 接口，并将其注入到 parser 属性中。但是， localize-router 为我们提供了直接可用的默认解析器 LocalizeUniversalLoader。
在 LocalizeRouterModule.forRoot 方法中，我们配置了一些通用的 options，包括 useCachedLang 和 alwaysSetPrefix 等。这些通用属性相对简单，都有默认值，可以自行查阅官方说明文档。
这两个方法的设置还要结合整个应用初始化时的语言环境，而这个环境是由 defaultLangFunction 方法来定义的。默认情况下，它会检测浏览器语言设置并返回相应语言，否则返回英文。
在组件中，我们需要监听路由变化事件，以便及时更新本地化路由。 LocalizeRouterService.changeLanguage 方法返回可订阅的流，它会在语言环境变更时执行。
最后，在 HTML 文件中应用翻译。TranslatePipe 是 ngx-translate 的核心管道，它可以将一个 key 转换成相应的翻译文本。在这个例子中，它被应用于 h1 元素和 p 元素中的 home 和 about，因此 ngx-translate 将查找相应翻译文件，并返回对应的翻译文本。
总结
以上是使用 localize-router 在 Angular 中实现多语言路由的过程与方法。通过本地化路由，可以轻松实现多语言页面的切换、跳转和共享等功能。相信通过学习本文，您可以更好地理解 localize-router 的工作原理和使用方法，提升自己的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e5d9381d61a3540ad6