Блог

У меня есть несколько гиперссылок на странице

 <a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >First Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route2' >Second Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route3' >Third Link</a>
 

Первая ссылка выделяется, потому что имеет класс «active». при нажатии на каждую ссылку у меня есть некоторые действия, но первая ссылка все равно остается активной.
Теперь, как я могу переместить активный класс на соответствующую нажатую ссылку?

используйте директиву routeLinkActive следующим образом

 <a href="#" class="list-group-item list-group-item-action"  routerLinkActive="active" routerLink='/route1' (click)="setActiveItem('first')">First Link</a>
<a href="#" class="list-group-item list-group-item-action"  routerLinkActive="active" routerLink='/route2' (click)="setActiveItem('second')">Second Link</a>
<a href="#" class="list-group-item list-group-item-action"  routerLinkActive="active" routerLink='/route3' (click)="setActiveItem('third')">Third Link</a>
 

Используйте ngClass для условного переключения активного элемента:

https://angular.io/api/common/NgClass

Добавьте (click) действие к каждому a элементу, а внутри вызываемой функции установите активный элемент:

 <a href="#" class="list-group-item list-group-item-action" [ngClass]="{'active': activeItem === 'first'}" routerLink='/route1' (click)="setActiveItem('first')">First Link</a>
<a href="#" class="list-group-item list-group-item-action" [ngClass]="{'active': activeItem === 'second'}"routerLink='/route2' (click)="setActiveItem('second')">Second Link</a>
<a href="#" class="list-group-item list-group-item-action" [ngClass]="{'active': activeItem === 'third'}" routerLink='/route3' (click)="setActiveItem('third')">Third Link</a>
 

в ts-файле:

 activeItem: string;

setActiveItem(activeItem: string): void {
  this.activeItem = activeItem;
}