Маршрутизатор угловой маршрутизацииLinkActive

Question

По какой-то причине, когда я перехожу на ссылку heroes / 2, обе ссылки получают класс .active от routerLinkActive, но я ожидаю, что только 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

Вам необходимо установить для параметра exact значение true, чтобы установить в классе только точные выражения:

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

Answer 2

Вы можете настроить RouterLinkActive, передав точное: true. Это добавит классы только тогда, когда URL-адрес точно соответствует ссылке.

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