[英]Underline most recent clicked element
I am trying to find a way to keep track of the most recently clicked item and underline that item only.我正在尝试找到一种方法来跟踪最近单击的项目并仅在该项目下划线。 This is my current approach, however, it is underlining every item I have clicked on but not the most recent one.这是我目前的方法,但是,它强调了我点击的每个项目,但不是最近的项目。 I also tried to use :active
, :focus
and :focus:active
on li
, but the underline doesn't stay.我还尝试在li
上使用:active
、 :focus
和:focus:active
,但下划线没有保留。
In my HTML:在我的 HTML 中:
<li [ngClass]="{ 'target': isTarget }" (click)="updateTarget(t)">
{{ details }} </li>
In my CSS:在我的 CSS 中:
li {
&.target {text-decoration: underline; }
}
In my ts in angular 2:在我的角度 2 中:
updateTarget(t) {
this.isTarget = t;
}
I am assuming your targets to be an array of json object.我假设你的目标是一个 json 对象数组。 Here is how you can do it:以下是您的操作方法:
<li [ngClass]="{ 'target': isTarget === t }" (click)="isTarget = t">
{{details }}
</li>
and your styles:和你的风格:
.target {
text-decoration: underline;
}
Full code with example in this Plunker Demo此Plunker 演示中包含示例的完整代码
In your component, have an array, each member of which will correspond to an <li>
in the view.在您的组件中,有一个数组,其中的每个成员将对应于视图中的一个<li>
。
public target = null; // reference to the most recently clicked link
public links = [
{details: '...'},
{details: '...'},
];
Then in your view, use *ngFor
to iterate through links
:然后在您的视图中,使用*ngFor
遍历links
:
<li *ngFor="let link of links" [ngClass]="{'target': link===target }"
(click)="target = link">
{{link.details}}
</li>
When user clicks a link, Angular will set the underlying object as the current target, and the ngClass
directive will add the " target " class since link===target
will be true only for the clicked link.当用户点击一个链接时,Angular 会将底层对象设置为当前目标,并且ngClass
指令将添加“ target ”类,因为link===target
仅对点击的链接为真。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.