角路由routerLinkActive

Question

出于某种原因，当我进入heroes / 2链接时，两个链接都从routerLinkActive获得.active类，但是我希望只有c2.component可以获取它。我怎么了？

P.S。如果我去英雄链接=仅此链接有效。

    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来配置RouterLinkActive。仅当网址与链接完全匹配时，才会添加类。

<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>