下劃線最近點擊的元素

Question

我想找到一種方法來跟蹤最近點擊的項目，並只強調該項目。這是我目前的做法，但是，它強調了我點擊過的每個項目，但不是最新的項目。我也嘗試在li上使用：active，：focus和：focus：active，但下劃線不會保留。

在我的HTML：

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

在我的CSS：

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

在我的TS在角2：

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

Answer 1

我假設你的目標是數組json對象。這裏是你如何能做到這一點：

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

和你的風格：

.target { 
    text-decoration: underline; 
} 

在此Plunker Demo

Answer 2

在你的組件全部代碼例子，有一個數組，其中的每個成員都在視圖中對應於<li>。

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

在你看來

然後，使用*ngFor通過links迭代：

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

當用戶點擊一個鏈接，角將設置底層對象作爲當前目標和ngClass指令將增加「目標」自link===target開始的類將僅適用於點擊鏈接。