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

时间:2016-05-04 03:28:53

标签: angular angular2-routing

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

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

我已经阅读了文档,&amp;感到惊讶的是为什么Router类有两个不同的文档。

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中不可用。但我无法弄清楚如何实现同样的目标。

3 个答案:

答案 0 :(得分:3)

哦,明白了。

调用 isRouteActive 是一个错字。我应该使用 router.isRouteActive

来调用它

所以正确地使用它

模板中的

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

用户

组件

constructor(public router: Router){

}

答案 1 :(得分:2)

使用angular 4+ router.isRouteActive对我不起作用,而是使用router.isActive,它作为官方方法在文档中列出了诀窍。使用这个与routerLinkActive属性绑定的主要优点是当你不想在ui中显示链接时它很有用,只显示一些排序步骤指示。

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

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

答案 2 :(得分:0)

这就是诀窍(使用RC5)

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

重复https://stackoverflow.com/a/39146324/1448419