为最近点击的元素加下划线

Question

我正在尝试找到一种方法来跟踪最近点击的项目并仅为该项目加下划线。这是我目前的方法，但是，它强调了我点击的所有项目，但不是最近的项目。我也尝试使用：active，：focus和：focus：在li上激活，但是下划线不会停留。

在我的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 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>

当用户点击链接时，Angular会将基础对象设置为当前目标，而ngClass指令将添加＆＃34; 目标＆＃34;自link===target以来的类仅对所点击的链接为真。