前言
在前端开发中，我们经常需要使用国际化的功能来支持多语言。Angular 框架提供了一个非常方便的国际化解决方案 —— Angular i18n。但使用 Angular i18n 时，由于路由配置文件也是通过代码生成的，所以需要进行额外的处理，使之能够支持多语言。本文将介绍一个使用 npm 包 localize-router-ignoreroutes 实现多语言路由配置的方法。
安装
要使用 localize-router-ignoreroutes，我们需要先安装它。在终端输入以下命令：
npm install --save localize-router-ignoreroutes
简单使用
- 在 app.module.ts 中引入：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-- -- ----------------------------
------ -
---------------------
-----------------------
-------------------------
-------------------
-------------------------
----------------------
-------------------
------------------
- ---- -------------------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
-----------------
-- -- --------------------
-------------------------------- -
------- -------------------
------------------- ---------------------------
------- ---
----- ---
----------------- -------
---------------- -----
--
-------------- -----
---------------- -----
--------------- ---------------
-------------------- -- -- -----
------------- -----------
------------ ----------
--------------- ------ ------
------------------- -----
---
--
---------- ------------------------ --------------------
---------- ---------------
--
------ ----- --------- --在 LocalizeRouterModule.forRoot() 中，设置 useLocalizedRoutes: true，就可以启用路由国际化功能了。
- 在路由配置文件
app-routing.module.ts中添加语言前缀。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
----- ------- ------ - -
-
-- ------
----- --------
--------- -
-
----- -------
---------- --------------
--
-
----- --------
---------- ---------------
--
-
----- -----
----------- -------
--
--
--
--
-----------
-------- -------------------------------
-------- ---------------
--
------ ----- ---------------- --在路由配置文件中，使用 :lang 参数作为语言前缀，并把路由定义在它的子节点。
指定忽略的路由
有时候，我们需要忽略一些特定的路由，比如登录、注册等页面，这些页面不需要考虑多语言的问题，这时候我们可以指定忽略的路由。
在 app.module.ts 中，我们需要设置一个唯一的 ID，以便在路由配置文件中使用。比如，我们设置一个 ID 为 login：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------------- - ---- -------------------------------
-----------
---
-------- -
---
-----------------------------
-
-
----- --------
------------- -- --
--------------------------------------- -- ---------------
--------------- -----
----- -
-- -- --
----------------- --------
--
--
--
-
---
---
--
---
--
------ ----- --------- --然后，在路由配置文件 app-routing.module.ts 中，调用 LocalizeRouterService.ignoreRoute() 方法，指定忽略的路由：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------------- - ---- -------------------------------
------------
--------- ------------
------------ -------------------------
---------- --------------------------
--
------ ----- -------------- ---------- ------ -
------------------- --------- ---------------------- --
----------- ---- -
-- -------
-----------------------------------
-
-这里我们在 LoginComponent 中使用 LocalizeRouterService.ignoreRoute() 方法，把路由 ID login 传递给它。这样，我们就可以在 app.module.ts 中指定要忽略的路由了。
示例代码
最后，给出一个完整的代码示例：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-- -- ----------------------------
------ -
---------------------
-----------------------
-------------------------
-------------------
------------------
-------------------------
----------------------
-------------------
- ---- -------------------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - -------------- - ---- --------------------------
-----------
------------- -------------- -------------- --------------- ----------------
-------- -
--------------
------------------------
-----------------
-- -- --------------------
-----------------------------
-
-
----- -------
---------- --------------
----- -
-- -- --
----------------- -------
--
--
-
----- --------
---------- ---------------
----- -
-- -- --
----------------- --------
--
--
-
----- --------
------------- -- --
--------------------------------------- -- ---------------
-- --------
--------------- ------
----- -
-- -- --
----------------- --------
--
--
--
-
------- -------------------
------------------- ---------------------------
------- ---
----- ---
----------------- -------
---------------- -----
--
-------------- -----
---------------- -----
--------------- ---------------
-------------------- -- -- -----
------------- -----------
------------ ----------
--------------- ------ ------
------------------- -----
-
--
--
---------- ------------------------ --------------------
---------- ---------------
--
------ ----- --------- -
------------------- --------- ---------------------- --
-在 AppModule 中，我们引入了 LocalizeRouterModule，并在 LocalizeRouterModule.forRoot() 中启用路由国际化功能，并设置一个默认的语言。
在 AppRoutingModule 中，我们为四个页面创建了路由，并为每个页面设置一个唯一的 ID。
在 LoginComponent 中，我们使用 LocalizeRouterService.ignoreRoute() 方法，指定要忽略的路由 ID。这样，在 app.module.ts 中就可以通过这个 ID 来忽略它了。
总结
通过本文，我们学习了如何使用 npm 包 localize-router-ignoreroutes 来实现 Angular 应用的国际化功能，并指定忽略的路由。我希望这篇文章对你有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1081e8991b448daa4f