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() ）。