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

Question

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

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

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

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

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

Однако в очень похожей настройке у меня есть пункт меню "4": http://localhost:4200/2/A. Это правильно показывает "4" в верхней навигационной панели как активную и "Test A" как активную. Но когда я захожу на http://localhost:4200/2/B B, кнопка "Test 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' }
];

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

Спасибо Дэвид

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>

В вашем приложении Routes

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] основанный на вашем текущем пути маршрутизатора