使用 isRouteActive 确定路由是否处于活动状态答案

【问题标题】：Using isRouteActive for determining if the route is active使用 isRouteActive 确定路由是否处于活动状态
【发布时间】：2016-08-29 07:25:55
【问题描述】：

我正在尝试使用 isRouteActive 来确定特定路线是否处于活动状态，但出现错误， angular2.dev.js:23730 TypeError: l_context.isRouteActive 不是函数

<li [class.active]="isRouteActive(router.generate(['/Users']))"><a [routerLink]="['Users']">Users </a></li>

我浏览了文档，很惊讶为什么路由器类有两个不同的文档。

https://angular.io/docs/ts/latest/api/router/index/Router-class.html https://angular.io/docs/ts/latest/api/router/Router-class.html

我正在使用 Angular2 的 2.0.0-beta.12 版本。

似乎 isRouteActive 在 2.0.0-beta.12 中不可用。但我无法弄清楚如何实现这一目标。

【问题讨论】：

你用的怎么样？
我用它来突出显示当前路由的活动类的链接
Users

【解决方案1】：

哦，明白了。

调用 isRouteActive 时打错了。我应该使用 router.isRouteActive 来调用它。

所以为了正确使用它

在模板中：

<li [class.active] = "router.isRouteActive(router.generate(['/Users']))">

用户

在组件中：

constructor(public router: Router){

}

【讨论】：

作为最佳实践，我们可以将路由器设为私有变量并使用类中的方法将其公开。

【解决方案2】：

使用 Angular 4+ router.isRouteActive 对我不起作用，而是使用了文档中列出的 router.isActive 作为官方方法。使用 this vs routerLinkActive 属性绑定的主要优点是，当您不想在 ui 中显示链接时，它很有帮助，只显示一些排序步骤指示器。

https://angular.io/api/router/Router#isActive

<li [class.active]="router.isActive('/my/routing/path')" ></li>

【讨论】：

还有第二个参数exact: boolean

【解决方案3】：

这可以解决问题（使用 RC5）

<li [class.active]="homeLink.classList.contains('active')">
    <a #homeLink routerLink="/home" routerLinkActive="active">Home</a>
</li>

https://stackoverflow.com/a/39146324/1448419 的副本

【讨论】：