我已经阅读了这个关于如何确定活动路线的问题，但我仍然不清楚如何使用参数确定活动路线？
现在我正在这样做：
<a [routerLink]="['/Profile/Feed', {username: username}]"
[ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
Feed for {{username}}
</a>
在我的组件内部：
getLinkStyle(path:string):boolean {
console.log(this._location.path()); // logs: '/profile/john_doe/feed'
return this._location.path() === path;
}
这将起作用，因为我将用户名作为字符串传递。有没有办法通过传递正确的参数来做到这一点？
使用新的、即将推出的 Angular 2 路由器（在我写这篇文章时版本为 3.0-alpha.7），它非常简单。
您需要做的就是使用[routerLinkActive]链接中的指令。
<a [routerLinkActive]="['active']" [routerLink]="['/contact', contact.id ]">
{{contact.name}}
</a>
当 Angular 2 真正发布时，您将使用它，不再是候选发布版本。我现在正在使用路由器的 alpha 版，没有任何问题。
这是 Plunk 演示它。当您单击它们时，您可以看到链接变为红色。这是将active类分配给他们的指令。当然，您可以使用您选择的任何类名。
只需检查自动定义的router-link-active类到a元素。
在 Angular 2 中，rc1router.isRouteActive不再存在。我在任何地方都找不到可行的解决方案，但我能够像这样解决它（自定义方法isActiveRoute可以解决问题）：
App.component.ts：
import { Component } from '@angular/core';
import { Routes, Route, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { HomeComponent } from './home.component';
import { P1Component } from './p1.component';
@Component({
selector: 'app',
templateUrl: './app/app.template.html',
directives: [ROUTER_DIRECTIVES]
})
@Routes([
{ path: '/', component: HomeComponent },
{ path: '/p1', component: P1Component }
])
export class AppComponent implements OnInit {
constructor(public router: Router){ }
isActiveRoute(route: string) {
return this.router.serializeUrl(this.router.urlTree) == this.router.serializeUrl((this.router.createUrlTree([route])));
}
}
App.template.html：
<ul class="nav navbar-nav">
<li [class.active]="isActiveRoute('/')">
<a class="nav-link" [routerLink]="['/']">Home</a>
</li>
<li [class.active]="isActiveRoute('/p1')">
<a class="nav-link" [routerLink]="['/p1']">Page 1</a>
</li>
我一直在尝试设置活动类，而不必确切知道当前位置是什么（使用路线名称）。这是迄今为止我得到的最好的解决方案。
这就是RouteConfig的样子（我已经对其进行了一些调整，使其看起来像您想要做的那样）：
@RouteConfig([
{ path: '/', component: HomePage, as: 'Home' },
{ path: '/signin', component: SignInPage, as: 'SignIn' },
{ path: '/profile/:username/feed', component: FeedPage, as: 'ProfileFeed' },
])
视图看起来像这样：
<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
<a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
<a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
<a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>
到目前为止，这一直是我解决该问题的首选解决方案，它也可能对您有所帮助。
尝试这个 ：
<li class="ann_profileimg" [routerLinkActive]="['active']" [routerLink]="['profile']">
<div class="ann_header_menu_left ann_profile_avatar_small"></div>
<span>Vishnu </span>
</li>
您可以使用 Angular2 通用包中的新位置服务：https ://angular.io/docs/js/latest/api/router/Location-class.html#!#path-anchor
import { Location } from '@angular/common';
...
export class YourClass {
constructor(private _loc:Location) {}
getCurrentPath() {
return this._loc.path();
}
}
注意：最好使用Router服务来触发路由变化。仅当您需要与路由之外的规范化 URL 交互或创建规范化 URL 时才使用位置。
请注意：文档说从 导入router，但我拥有的最新斗鱼版本Location在common.
对于 Angular 4+，确定模板中的活动路由相当容易，因为有一个用于此目的的内置指令名称routerLinkActive，您可以使用以下方式：
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About Us</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
</li>
</ul>
<a [routerLink]="['/Profile/Feed', {username: username}]"
routerLinkActive="active-item" [routerLinkActiveOptions]="{exact: false}">
Feed for {{username}}
</a>
active-item 是您要为活动菜单提供的 css 类。routerLinkActive 用于为活动菜单提供 css，其中 routerLinkActiveOptions 将告诉您是否希望 url 完全匹配。这通常有助于您在创建和编辑具有相同 url 的地方（使用参数）
例子：
用于创建：
http://localhost/feed
编辑：
http://localhost/feed/1