Angular2使用routerLinkActive选择2条路由

Question

我有2条路线

*head, tail = array
head.each { |each| put "looping: " << each }
puts "last element: " << tail 

并在html中

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

当我导航到第二个时，他们都有活跃的课程。 这是一个错误还是想要的

使用：

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

Answer 1

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

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

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

请参阅：Routing & Navigation

Answer 2

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

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

请参阅：@angular/router/src/url_tree.ts#L17