在 Angular 应用程序中,我们经常需要确定当前激活的路由。例如,在导航菜单中,我们可能需要高亮显示当前选定的菜单项。本文将介绍在 Angular 中如何确定激活的路由。
激活的路由是什么?
首先,让我们了解一下“激活的路由”是什么意思。在 Angular 应用程序中,路由是指导航到应用程序不同部分的方式。激活的路由是指当前正在被用户查看的路由。例如,在以下 URL 中:
https://example.com/home
“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