Угловой routerLinkActive не работает должным образом

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

У меня настроена маршрутизация, и я работаю правильно, за исключением одной небольшой проблемы, когда 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» Кнопка правильно отображается как активная, но основная панель навигации потеряла свой активный флаг на цифре «4».

Прилагаемые ниже фрагменты кода:

Панель навигации

<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' }
];

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

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


angular angular-routing routerlinkactive
person dkearsley    schedule 12.11.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что вы ожидаете, что 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] на основе вашего текущего пути к маршрутизатору.

person Poul Kruijt    schedule 12.11.2018
comment
Спасибо! Отличный ответ и решил мою проблему. Я не думал об использовании перенаправления - хорошее простое предложение. - person dkearsley; 12.11.2018