我读过this question about how to determine the active route,但我还不清楚如何确定一个有参数的活动路线?
现在我这样做:
<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;
}
这将有效,因为我将用户名作为字符串传递。有没有办法通过传递正确的参数?
只需将自动定义的router-link-active
类检查为a
元素即可。
随着新的,即将到来的Angular 2路由器(在我写这篇文章时在version 3.0-alpha.7),它非常简单。
您需要做的就是在链接中使用[routerLinkActive]
指令。
<a [routerLinkActive]="['active']" [routerLink]="['/contact', contact.id ]">
{{contact.name}}
</a>
这是Angular 2发布时真正使用的,而不再是候选版本。我现在正在使用路由器的alpha而没有任何问题。
Here's Plunk demonstrating it。您可以看到链接在您点击它们时变为红色。这是指令将active
类分配给他们。当然,您可以使用您选择的任何类名。
在Angular 2 rc1中,router.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' },
])
View看起来像这样:
<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>
到目前为止,这是我首选的问题解决方案,它也可能对您有所帮助。
您可以使用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();
}
}
注意:最好使用路由器服务来触发路由更改。仅当您需要在路由之外进行交互或创建规范化URL时才使用位置。
请注意:文档说从qazxsw poi导入,但最新的beta版本我在router
有qazxsw poi服务。
试试这个 :
Location
对于Angular版本4+,确定模板中的活动路径非常简单,因为有一个用于此目的的内置指令名称common
,您可以使用以下方法:
<li class="ann_profileimg" [routerLinkActive]="['active']" [routerLink]="['profile']">
<div class="ann_header_menu_left ann_profile_avatar_small"></div>
<span>Vishnu </span>
</li>