Quiero agregar el nombre de clase 'activo' onClick a 'li a' y también eliminar cualquier clase 'activa' presente en 'li a'. El código actual funciona correctamente si hago clic en la secuencia desde los elementos superiores, pero cuando hago clic en los elementos de abajo hacia arriba, no funciona.
<div class="container text-center"> <ul id="myList" class="pt-5"> <li class="p-3"> <a href="#" class="d-inline-block" (click)="linkActive($event)">List 1</a> </li> <li class="p-3"> <a href="#" class="d-inline-block" (click)="linkActive($event)">List 2</a> </li> </ul> </div> linkActive(event) { const activeClass = event.srcElement.classList.contains('active'); const classFound = document.querySelector('li a'); const hpn = classFound.classList.contains('active'); if (activeClass == true) { if (hpn == true) { classFound.classList.remove('active'); } alert('true'); event.srcElement.classList.remove('active'); } else { if (hpn == true) { classFound.classList.remove('active'); } alert('false'); event.srcElement.classList.add('active'); } }Encuentre el código de muestra: https://stackblitz.com/edit/angular-ivy-jf9xvp
No manipule el DOM directamente de esta manera. Puede usar ngClass para lograr el resultado deseado:
modelo:
<a href="#" class="d-inline-block" [ngClass]="{'active': activeList === 1}" (click)="linkActive(1)">List1</a>.ts
public activeList: number;...
public linkActive(listNumber: number) { this.activeList = listNumber; }En general, como se recomienda en los comentarios, haga el tutorial de héroes e intente comprender cómo usar mecanografiado.