Souligner le dernier élément cliqué

Question

J'essaie de trouver un moyen de garder une trace du dernier élément cliqué et de souligner cet élément seulement. C'est mon approche actuelle, cependant, elle souligne tous les articles sur lesquels j'ai cliqué, mais pas le plus récent. J'ai aussi essayé d'utiliser: active,: focus et: focus: actif sur li, mais le soulignement ne reste pas.

Dans mon HTML:

<li [ngClass]="{ 'target': isTarget }" (click)="updateTarget(t)"> 
    {{ details }} </li> 

Dans mon CSS:

li { 
    &.target {text-decoration: underline; } 
} 

Dans mes ts dans 2 angulaire:

updateTarget(t) { 
    this.isTarget = t; 
} 

Answer 1

Je suppose vos cibles à être un tableau de objet json. Voici comment vous pouvez le faire:

<li [ngClass]="{ 'target': isTarget === t }" (click)="isTarget = t"> 
    {{details }} 
</li> 

et vos styles:

.target { 
    text-decoration: underline; 
} 

code complet avec l'exemple dans ce Plunker Demo

Answer 2

Dans votre composant, ont un tableau, chaque membre sera correspondent à <li> dans la vue.

public target = null; // reference to the most recently clicked link 
public links = [ 
    {details: '...'}, 
    {details: '...'},  
]; 

Alors à votre avis, utilisez *ngFor pour itérer links:

<li *ngFor="let link of links" [ngClass]="{'target': link===target }" 
    (click)="target = link"> 
    {{link.details}} 
</li> 

Lorsque l'utilisateur clique sur un lien, angulaire va définir l'objet sous-jacent comme la cible actuelle, et la directive ngClass ajoutera la "cible" La classe link===target sera vraie uniquement pour le lien cliqué.