Как изменять класс ссылки в Bootstrap <navbar> при переключении страниц через Angular router?

110
14 апреля 2021, 12:30

Есть навбар в app.component.html:

      <!-- NAVBAR -->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">3Leaves <img src="./assets/3leaves.svg" alt="3Leaves"></a>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
  <li class="nav-item" [routerLinkActive]="['active']">
    <a class="nav-link" routerLink="/"><i class="fab fa-hotjar"></i> Горячие товары <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" [routerLinkActive]="['active']">
    <a class="nav-link"><i class="fas fa-chart-line"></i> Популярные товары</a>
  </li>
  <li class="nav-item" [routerLinkActive]="['active']">
    <a class="nav-link"><i class="far fa-calendar-check"></i> Новые товары</a>
  </li>
  <li class="nav-item" [routerLinkActive]="['active']">
    <a class="nav-link" routerLink="/new"><i class="far fa-plus-square"></i> Добавить товар</a>
  </li>
</ul>
<form class="form-inline my-2 my-lg-0">
  <input class="nav-search mr-sm-2" type="search" placeholder="Искать товар..." aria-label="Search">
  <button class="btn btn-success my-2 my-sm-0" type="submit">Найти</button>
</form>
<div class="cart-circle">
  <div class="circle">0</div>
  <a class="cart" href="#"><i class="fas fa-shopping-cart"></i></a>
</div>
</div>
</nav>
</div>
<!-- /NAVBAR -->
<router-outlet></router-outlet>
...

Как динамически убирать класс active у одной ссылки, и добавлять другой, на которой сейчас пользователь?

UPD. изменил li class="nav-item" на li class="nav-item" [routerLinkActive]="['active'] и убрал routerLink у неактивных ссылок. Теперь оно, помимо текущей, всегда отмечает главную страницу ("Горячие товары") как активную. Что можно сделать?

Скрин:

Список всех активных ссылок на данный момент:

const appRoutes: Routes = [
    {path: '', component:HotgoodsComponent},
    {path: 'new', component:ItemaddComponent}
]
READ ALSO
Ошибка &ldquo;This site can’t be reached localhost refused to connect&rdquo;

Ошибка “This site can’t be reached localhost refused to connect”

У меня есть солюшн с несколькими веб приложениями (aspnet mvc4) и библиотеками класов

103
начал учить С# и задался вопрос где лучше? [дубликат]

начал учить С# и задался вопрос где лучше? [дубликат]

Всем привет,вот буквально 2-3 дня назад сел за изучение С# и появился встречный вопрос: где учить его? В книгах,либо в видео? Если в книгах,то...

77
Login failed при попытке получить данные из БД в ASP.NET Core

Login failed при попытке получить данные из БД в ASP.NET Core

Согласно этому руководству, пытаюсь создать и инициализировать базу данныхНасколько я понимаю, при использовании EntityFramework в ASP

101