下划线最近点击的元素

问题描述：

我想找到一种方法来跟踪最近点击的项目，并只强调该项目。这是我目前的做法，但是，它强调了我点击过的每个项目，但不是最新的项目。我也尝试在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'？ – Faisal

您必须在父组件或服务中执行此操作，因为对一个孩子实例的更改应该更改其兄弟的状态。 – jonrsharpe

't'是一个自定义对象@Faial –

答

我假设你的目标是数组json对象。这里是你如何能做到这一点：

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

和你的风格：

.target { 
    text-decoration: underline; 
}

@ Matt-pow，对此有何更新？ – Faisal

答

在你的组件全部代码例子，有一个数组，其中的每个成员都在视图中对应于<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开始的类将仅适用于点击链接。