Выделение элемента Navbar

Question

У меня есть вопрос относительно navbars. Я хочу выделить элемент панели навигации, когда щелкнул элемент, но не знаю, нужно ли для этого использовать angular или css. Можете ли вы привести меня немного, пожалуйста?

   <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a routerLink="/tasks" class="nav-link" href="#">Tasks</a>
        </li>
        <li class="nav-item">
          <a routerLink="/newTask" class="nav-link" href="#">New task</a>
        </li>
        <li class="nav-item">
          <a routerLink="/users" class="nav-link" href="#">Users</a>
        </li>
        <li class="nav-item">
          <a routerLink="/newProject" class="nav-link" href="#">New Project</a>
        </li>
      </ul>
    </div>

Answer 1

Вы можете использовать routerLinkActive, который добавит класс css, который вы можете использовать для стилизации. Поэтому в следующем коде, если текущий маршрут /newProject, элемент списка будет стилизован в соответствии с вашим active css классом:

<li routerLinkActive="active">
  <a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>

Более подробная информация о routerLinkActive здесь .