Angular路由routerLinkActive

Question

出于某种原因，当我去 heroes/2 link 时，两个 link 都从 routerLinkActive 获得 .active class，但我只希望 c2.component应该得到它。我的错误是什么？

P.S。如果我去英雄 link = 只有这个 link 活跃。

    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

您可以通过传递 exact: true 来配置 RouterLinkActive。这将仅在 url 与 link 完全匹配时添加类。

<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，以便仅将 class 设置为完全匹配：

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

Angular路由routerLinkActive

Angular Routing routerLinkActive

angular-routing

angular

angular-router