角路由routerLinkActive

Question

由于某种原因，当我转到英雄/2链接时，两个链接都从.active获得routerLinkActive类，但我希望只有c2组件才能得到它。我犯了什么错？

如果我去英雄链接=只有这个链接激活。

    const appRoutes: Routes = [
            { path: 'heros', component: c1},
            { path: 'heros/:id', component: c2},
        ];

  <a routerLink="/heros" routerLinkActive="active">heros</a>
  <a routerLink="/heros/2" routerLinkActive="active">hero 2</a>

Answer 1

您可以通过传递true :true来配置RouterLinkActive。只有当url与链接完全匹配时，才会添加类。

<a routerLink="/heros" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">heros</a>
<a routerLink="/heros/2" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">hero 2</a>

Answer 2

您需要将exact参数设置为true，以便只将类设置为精确的数学：

<a 
  routerLink="/heros" 
  routerLinkActive="active" 
  [routerLinkActiveOptions]="{exact: true}"
> heros </a>