[英]One click handler for multiple elements in Angular 2
Let's say we have a div with 3 links inside. 假设我们有一个内部有3个链接的div。
<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);
为了在jQuery中为链接分配一个单击处理程序,我们可以像这样做:
$('.wrap a').on('click', callback);
. 。
What is the best approach for that in Angular2? 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. 从我学到的东西,我可以使用简单的(点击)每个链接,如:
<a class="link" (click)="callback()">
,但对我来说,它看起来很奇怪。 Another option would be to use a directive and do smth like <a class="link" [directive]="value">
, this one I like more. 另一种选择是使用指令并像
<a class="link" [directive]="value">
那样做,我喜欢这个。
Is there an even better implementation of described case? 是否有更好的实施描述的案例?
Actually it depends on what you would like to do. 实际上这取决于你想做什么。 But if you just want to assign a clickHandler you normaly go with the (click) directive.
但是,如果您只想分配一个clickHandler,那么您通常会使用(click)指令。 Why does this looks odd to you?
为什么这对你来说很奇怪?
If you would like to access the ClickEvent within you handler pass the $event
paramter to your callback like so: <a class="link" (click)="callback($event)">link</a>
如果您想在您处理程序中访问ClickEvent,请将
$event
参数传递给您的回调,如下所示: <a class="link" (click)="callback($event)">link</a>
if you have a collection of links you can iterate over it: 如果你有一个链接集合,你可以迭代它:
public links = ['link1','link2','link3']
; public links = ['link1','link2','link3']
;
then in your template: 然后在你的模板中:
<div class="wrap">
<a class="link" *ngFor="let link of links">{{link}}</a>
</div>
If you just want to navigate within your singlePageApplication you usually just use the routerLink
directive. 如果您只想在singlePageApplication中导航,通常只需使用
routerLink
指令。
<a routerLink="/my-path">link1</a>
The click event will bubble up to the parent div so you could put a the event handler there. click事件将冒泡到父div,因此您可以在其中放置事件处理程序。
<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);
}
}
@Component({
selector: 'my-app',
template: `
<div>
<div (click)="onClick($event)">
<a id="link1" href="#" class="link">link1</a>
<a id="link2" href="#" class="link">link2</a>
<a id="link3" href="#" class="link">link3</a>
</div>
</div>
`,
})
export class App {
constructor() {
}
onClick(event) {
alert(event.srcElement.id);
}
}
在我看来,最好的方法是使用指令,并可能解析内部HTML以组成一个有效的链接,如这里所述
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.