Angular 2 中多个元素的一键式处理程序 [英] One click handler for multiple elements in Angular 2
问题描述
假设我们有一个 div,里面有 3 个链接.
<a class="link">link1</a><a class="link">link2</a><a class="link">link3</a>
为了在 jQuery 中为链接分配点击处理程序,我们可以这样做:$('.wrap a').on('click', callback);
.
Angular2 中最好的方法是什么?
据我所知,我可以对每个链接使用一个简单的(点击),例如:<a class="link" (click)="callback()">
,但对我来说这看起来很奇怪.另一种选择是使用指令并像,我更喜欢这个.
是否有更好的描述案例的实现?
click 事件将冒泡到父 div,因此您可以在那里放置事件处理程序.
<a id="link1" class="link">link1</a><a id="link2" class="link">link2</a><a id="link3" class="link">link3</a>
导出类 AppComponent {单击(事件:MouseEvent){console.log(event.srcElement.id);}}
Let's say we have a div with 3 links inside.
<div class="wrap">
<a class="link">link1</a>
<a class="link">link2</a>
<a class="link">link3</a>
</div>
In order to assign a click handler for the links in jQuery we can do smth like this:
$('.wrap a').on('click', callback);
.
What is the best approach for that in Angular2?
From what I learned I could use a simple (click) for each link, like:
<a class="link" (click)="callback()">
, but to me it looks odd.
Another option would be to use a directive and do smth like
<a class="link" [directive]="value">
, this one I like more.
Is there an even better implementation of described case?
The click event will bubble up to the parent div so you could put a the event handler there.
<div class="wrap" (click)="clicked($event)">
<a id="link1" class="link">link1</a>
<a id="link2" class="link">link2</a>
<a id="link3" class="link">link3</a>
</div>
export class AppComponent {
clicked(event: MouseEvent) {
console.log(event.srcElement.id);
}
}
这篇关于Angular 2 中多个元素的一键式处理程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!