在 Angular 应用程序中，我们经常需要确定当前激活的路由。例如，在导航菜单中，我们可能需要高亮显示当前选定的菜单项。本文将介绍在 Angular 中如何确定激活的路由。
激活的路由是什么？
首先，让我们了解一下“激活的路由”是什么意思。在 Angular 应用程序中，路由是指导航到应用程序不同部分的方式。激活的路由是指当前正在被用户查看的路由。例如，在以下 URL 中：
------------------------
“home” 路由是激活的路由。
使用 Router 服务
要确定激活的路由，我们可以使用 Angular 的 Router 服务。Router 服务提供了一个 routerState 属性，其中包含有关当前激活路由的信息。以下是如何使用 Router 服务来确定激活路由的示例代码：
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- ----------------------
--------- -
----
--- -----------------------------------
-- ---------------------------
-----
--- ------------------------------------
-- -----------------------------
-----
--- --------------------------------------
-- ---------------------------------
-----
-----
--
--
------ ----- ----------------------- -
------------------- ------- ------- --
--------------- -------- ------- -
------ --------------------------- ------
-
-在上面的示例代码中，我们使用 isActive() 方法来确定给定路由是否激活。该方法接受两个参数：第一个是要检查的路由路径，第二个是一个布尔值，指示是否检查子路由。在我们的示例代码中，我们将第二个参数设置为 true，以便检查子路由。
在 HTML 模板中，我们使用 [class.active] 绑定来动态地添加或删除 “active” CSS 类，具体取决于当前路由是否激活。我们还使用 Angular 的 routerLink 属性来创建导航链接，这将自动处理路由导航。
结论
在本文中，我们介绍了在 Angular 应用程序中如何确定激活的路由。我们使用 Angular 的 Router 服务来获取有关当前激活路由的信息，并在 HTML 模板中使用绑定来动态地添加或删除 “active” CSS 类。这是一个重要的前端技巧，可以帮助我们构建更好的用户界面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25047