Angular routerLinkActive не работает должным образом

Question

Я работаю над довольно простым проектом, но этот вопрос поставил меня в тупик!

У меня настроена маршрутизация и она работает правильно, за исключением одной небольшой проблемы, когда routerLinkActive не активирован.

Я не могу встроить изображение в вопрос, поэтому, пожалуйста, перейдите по ссылке, чтобы посмотреть на результаты, которые я получаю

Результаты маршрутизации

Когда я перехожу к: http://localhost:4200/1, пункт меню «1» правильно отображается как активный в навигационной панели. Если я затем перейду к дочернему маршруту: http://localhost:4200/1/top100, меню '1' все еще остается активным. Это именно то, как я хочу, чтобы это работало.

Однако в очень похожей настройке у меня есть пункт меню «4»: http://localhost:4200/2/A. Это правильно показывает «4» в верхней навигационной панели как активную и кнопку «Тест А» как активную. Но когда я перехожу на http://localhost:4200/2/B, кнопка «Тест B» правильно отображается как активная, но главная навигационная панель теряет свой активный флаг на «4».

Ниже приведены фрагменты кода:

Nav Bar

<ul class="navbar-nav">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/1">1</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/notUsed', 'notUsed']">2</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/notUsed', 'notUsed']">3</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/2', 'A']">4</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/notUsed">5</a>
  </li>
</ul>

Группа кнопок

<div class="btn-group-vertical fixedWidthButtonHonour mb-3" role="group" aria-label="Senior Grades">
  <button type="button" class="btn btn btn-outline-danger" [routerLink]="['/2', 'A']" routerLinkActive="active">Test A</button>
  <button type="button" class="btn btn btn-outline-danger" [routerLink]="['/2', 'B']" routerLinkActive="active">Test B</button>
</div>

Маршруты

const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: '1', component: Component1 },
  { path: '1/top100/:name', component: ComponentTop100 },
  { path: '2', component: Component2 },
  { path: '2/:viewType', component: Component2 },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

Я не могу понять разницу между двумя примерами. Прекрасно, если у кого-то есть идеи или рабочие демо, которые достигают того, что я хочу.

Спасибо David

Answer 1

Проблема в том, что вы ожидаете, что routerLinkActive на ['/2', 'A'] станет активным, когда вы наберете ['/2', 'B'].Это не так, как это работает.Вы должны создать routerLinkActive на /2 ссылке.

Если вы не против всегда перенаправлять /2 на /2/A, вы можете сделать следующее:

В панели навигации:

<li class="nav-item" routerLinkActive="active">
  <a class="nav-link" routerLink="/2">4</a>
</li>

ВМаршруты вашего приложения

const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: '1', component: Component1 },
  { path: '1/top100/:name', component: ComponentTop100 },
  { path: '2', redirectTo: '2/A', pathMatch: 'full' },
  { path: '2/:viewType', component: Component2 },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

Другое решение может состоять в том, чтобы просто вручную добавить [class.active] на основе текущего пути к маршрутизатору