переключение начальной загрузки класса гиперссылок с угловым - PullRequest
Новая
       10

переключение начальной загрузки класса гиперссылок с угловым

0 голосов
/ 19 апреля 2019

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

<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>

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

Ответы [ 2 ]

2 голосов
/ 19 апреля 2019

используйте директиву 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>
2 голосов
/ 19 апреля 2019

Используйте 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;
}
...