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

提问于 2024-05-09T13:05:01+08:00

浏览次

0

我正在尝试找到一种方法来跟踪最近点击的项目并仅为该项目加下划线 . 这是我目前的方法，但是，它强调了我点击的所有项目，但不是最近的项目 . 我也尝试使用：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;
}

2 回答

0
我假设你的目标是一个json对象的数组 . 以下是如何做到这一点：
```
<li [ngClass]="{ 'target': isTarget === t  }" (click)="isTarget = t">
    {{details }} 
</li>
```
和你的风格：
```
.target {
    text-decoration: underline;
}
```
这个例子的完整代码Plunker Demo
回复于 2024-05-09T13:05:01+08:00
0
在组件中，有一个数组，其中每个成员对应于视图中的 <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 仅对所单击的链接为true .
回复于 2024-05-09T13:05:01+08:00

相关问题