Различные цвета активной кнопки с Bootstrap и Angular ngFor

Question

У меня есть меню с четырьмя кнопками, которые при активации имеют определенный цвет, но этот цвет для всех четырех, такой же, как и RollOver. Есть ли способ определить цвет для каждой кнопки, как для активного состояния, так и для ролловера?

.html

<div class="d-flex justify-content-center">
    <ul class="nav nav-pills subNav">
      <li class="nav-item" *ngFor="let linea of lineas">
        <a class="nav-link rounded-circle p-3 m-2 m-lg-3" routerLink="{{linea.url}}" routerLinkActive="active" >
          <img class="iconProduct" src="{{ linea.image }}">
        </a>
        <p class="small text-center">{{ linea.titulo }}</p>
      </li>
    </ul>
  </div>

.ts

this.lineas = [
      { image: 'assets/images/icon1.svg', url:'url1', titulo: 'title1'},
      { image: 'assets/images/icon2.svg', url:'url2', titulo: 'title2' },
      { image: 'assets/images/icon3.svg', url:'url3', titulo: 'title3'},
      { image: 'assets/images/icon4.svg', url:'url4', titulo: 'title4' }
      ]

.scss

.subNav .nav-link {
  background-color: #d5d5d5;
}

Answer 1

Один из способов установить цвет фона для состояний active и hover, различающихся для каждой кнопки, - использовать псевдокласс: : nth-child CSS:

.subNav > .nav-item:nth-child(1) > .nav-link:hover,
.subNav > .nav-item:nth-child(1) > .nav-link.active {
  background-color: orange;
}

.subNav > .nav-item:nth-child(2) > .nav-link:hover,
.subNav > .nav-item:nth-child(2) > .nav-link.active {
  background-color: green;
}

.subNav > .nav-item:nth-child(3) > .nav-link:hover,
.subNav > .nav-item:nth-child(3) > .nav-link.active {
  background-color: red;
}

.subNav > .nav-item:nth-child(4) > .nav-link:hover,
.subNav > .nav-item:nth-child(4) > .nav-link.active {
  background-color: blue;
}

См. этот стек для демонстрации.

<Ч />

Альтернативный метод - определить цвет активного состояния в вашей структуре данных:

this.lineas = [
  { image: 'assets/images/icon1.svg', url:'url1', titulo: 'title1', activeColor: 'lime' },
  { image: 'assets/images/icon2.svg', url:'url2', titulo: 'title2', activeColor: 'green' },
  { image: 'assets/images/icon3.svg', url:'url3', titulo: 'title3', activeColor: 'red' },
  { image: 'assets/images/icon4.svg', url:'url4', titulo: 'title4', activeColor: 'blue'}
];

и применить его к стилю фона ссылки, когда установлен класс active:

<a #link [style.background-color]="isActive(link) ? linea.activeColor : null" ...>

isActive(link): boolean {
  return link.classList.contains("active");
}

См. этот стек для демонстрации. Вы заметите, что я установил цвет по умолчанию для состояния hover в этом случае:

.subNav > .nav-item > .nav-link:hover {
  background-color: #c0c0c0;
}

Вам может потребоваться обработать события мыши enter и leave, если вы хотите применить пользовательские цвета фона, определенные в данных, когда указатель мыши находится над ссылкой.

Answer 2

routerLinkActive назначен класс, который должен применяться к active li. active является классом в этом случае.

Попробуйте добавить active также к scss:

.active .subNav .nav-link {
  background-color: #d5d5d5;
}