[英]Angular2 Selects 2 routes with routerLinkActive
I have 2 routes 我有2条路线
{ path: '', component: DefaultComponent },
{ path: 'second', component: SecondComponent }
And in html 和在HTML
<a [routerLink]="['/']" [routerLinkActive]="['active']">default</a>
<a [routerLink]="['/second']" [routerLinkActive]="['active']">second</a>
When I navigate to the second one both of them have active class. 当我导航到第二个时,他们两个都处于活动状态。 Is this a bug or a wanted
这是虫子还是通缉犯
Using: 使用方法:
"@angular/router": "~3.3.0",
You can achieve what you expect when you add pathMatch: 'full'
to your route config: 当您将
pathMatch: 'full'
添加到路由配置中时,您可以实现预期的目标:
{ path: '', component: DefaultComponent, pathMatch: 'full' },
{ path: 'second', component: SecondComponent }
Then the first route will just activate if the complete path is matching, not only if a part of the path is matching. 然后,如果完整路径匹配,则第一条路线将被激活,不仅部分路径匹配。
See: Routing & Navigation 请参阅: 路由和导航
You have to set the [routerLinkActiveOptions]="{exact: true}"
attribute, to match the exact path as mentioned in the docs for RouterLinkActive . 您必须设置
[routerLinkActiveOptions]="{exact: true}"
属性,以匹配RouterLinkActive文档中提到的确切路径。
If you're setting {exact: true}
the router is checking for path equality ( equalSegmentGroups()
), otherwise it's just checking for partial segments ( containsSegmentGroup()
). 如果您设置
{exact: true}
则路由器将检查路径是否相等( equalSegmentGroups()
),否则,它将仅检查部分分段( containsSegmentGroup()
)。
See: @angular/router/src/url_tree.ts#L17 请参阅: @ angular / router / src / url_tree.ts#L17
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.