Angular2使用routerLinkActive选择2条路由

Question

我有2条路线

{ path: '', component: DefaultComponent },
{ path: 'second', component: SecondComponent }

和在HTML

<a [routerLink]="['/']" [routerLinkActive]="['active']">default</a>
<a [routerLink]="['/second']" [routerLinkActive]="['active']">second</a>

当我导航到第二个时，他们两个都处于活动状态。 这是虫子还是通缉犯

使用方法：

    "@angular/router": "~3.3.0",

Answer 1

当您将pathMatch: 'full'添加到路由配置中时，您可以实现预期的目标：

{ path: '', component: DefaultComponent, pathMatch: 'full' },
{ path: 'second', component: SecondComponent }

然后，如果完整路径匹配，则第一条路线将被激活，不仅部分路径匹配。

请参阅：路由和导航

Answer 2

您必须设置[routerLinkActiveOptions]="{exact: true}"属性，以匹配RouterLinkActive文档中提到的确切路径。

如果您设置{exact: true}则路由器将检查路径是否相等（ equalSegmentGroups() ），否则，它将仅检查部分分段（ containsSegmentGroup() ）。