下划线最近点击的元素答案

【问题标题】：Underline most recent clicked element下划线最近点击的元素
【发布时间】：2018-02-07 02:15:45
【问题描述】：

我正在尝试找到一种方法来跟踪最近点击的项目并仅在该项目下划线。这是我目前的方法，但是，它强调了我点击的每一项，但不是最近的一项。我还尝试在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;
}

【问题讨论】：

你在updateTarget函数中传递的t是什么？
您将不得不在父组件或服务中执行此操作，因为对子实例的更改应该会更改其兄弟的状态。
t 是一个自定义对象@Faisal
OP 您写道，您点击的链接仍然带有下划线。但我不明白：为什么当您单击其中任何一个链接时，所有链接都没有立即加下划线？一旦在updateTarget() 中设置了isTarget，它不会影响所有链接样式吗？

【解决方案1】：

在您的组件中，有一个数组，其中的每个成员将对应于视图中的一个<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 仅适用于点击链接。

【讨论】：

【解决方案2】：

我假设您的目标是一个 json 对象数组。这是你可以做到的：

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

和你的风格：

.target {
    text-decoration: underline;
}

Plunker Demo 中带有示例的完整代码

【讨论】：