角度 2 :检查路由名称是否是当前名称

Angular 2 : check if routeName is the current one

本文关键字：是否是 路由 检查 角度      更新时间：2023-09-26

我正在使用 Angular 2 进行一个项目，但我遇到了一个问题。我创建了一个链接组件，我可以像这样使用它：

<cmp-link [routeName]="['Channel/Add']">Add channel</cmp-link>

此组件检查当前路由是否与通过参数传递的路由相同，如果是，则应用类。如何检查当前网址是否与routeName提供的网址相同？嗯，这很丑陋。

this.isCurrentRoute = this.normalize(currentUrl) === this.routeName[0].toLowerCase();

你不喜欢它？我也没有。我想检查当前是否使用其名称激活了路由。

（在本例中，Channel/Add是路由名称）。

我不知道如何使用路由的名称来执行此操作。我看过Router和Instruction.

旧路由器实现的解决方案

我认为这个灵魂可以完成这项工作：

router.isRouteActive(router.generate(['Home']))

这不是一个非常好的解决方案，但我唯一知道的解决方案。

router.isRouteActive想要一个Instruction并且无法管理字符串本身，因此您需要使用 router.generate() 生成此Instruction。

来源：https://angular.io/docs/ts/latest/api/router/Router-class.html

注意

正如@Clément Flodrops所提到的，这仅适用于平面路由结构。据我所知，目前无法很好地存档。

也许可以使用 Router 的私有_childeRouter ，但要访问此属性，我们需要覆盖 Router 类。

所以我建议等待一段时间，也许路由器会支持此操作一次。

编辑：新路由器3.0.0-alpha

使用新路由器，您可以添加一个routerLinkActive="class"，如果路由器链接处于活动状态，这将添加类。

也可以工作，如果路由器链接不直接在带有路由器链接活动的标签上：

<li role="menuitem" routerLinkActive="active">
    <a href="" [routerLink]="['/home']" title="home" class="control-icon">
        <span class="fa fa-home"></span>
    </a>
</li>
相关文章：