在最近點擊的元素下划線

Question

我正在嘗試找到一種方法來跟蹤最近單擊的項目並僅在該項目下划線。 這是我目前的方法，但是，它強調了我點擊的每個項目，但不是最近的項目。 我還嘗試在li上使用:active 、 :focus和:focus:active ，但下划線沒有保留。

在我的 HTML 中：

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

在我的 CSS 中：

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

在我的角度 2 中：

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

Answer 1

我假設你的目標是一個 json 對象數組。 以下是您的操作方法：

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

和你的風格：

.target {
    text-decoration: underline;
}

此Plunker 演示中包含示例的完整代碼

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>

當用戶點擊一個鏈接時，Angular 會將底層對象設置為當前目標，並且ngClass指令將添加“ target ”類，因為link===target僅對點擊的鏈接為真。