Angular 2中的多个元素的一个点击处理程序

假设我们有一个带有3个链接的div。Angular 2中的多个元素的一个点击处理程序

<div class="wrap"> 
    <a class="link">link1</a> 
    <a class="link">link2</a> 
    <a class="link">link3</a> 
</div>

为了分配在jQuery的链接，我们可以做的水木清华这样的点击处理程序： $('.wrap a').on('click', callback);。

在Angular2中最好的方法是什么？

从我学到的东西我可以使用一个简单的（点击）为每个链接，如： <a class="link" (click)="callback()">，但对我来说它看起来很奇怪。另一种选择是使用一个指令，并做不像 <a class="link" [directive]="value">，这一个我更喜欢。

是否有更好的实现描述的情况？

来源

2017-05-24 lesgrosman

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); 
    } 
    }

来源

2017-05-24 23:45:02 JayChase

，使一个很大的意义，谢谢！ – lesgrosman

在我看来这种情况的最好方法是使用指令，也许解析内部HTML组成一个有效的链接为here

来源

2017-05-24 22:42:29

其实这取决于你想做些什么。但是，如果你只是想分配一个clickHandler，你通常会使用（click）指令。为什么你看起来很奇怪？

如果你想访问你的处理程序中的ClickEvent的$event放慢参数传递给你的回调，像这样：<a class="link" (click)="callback($event)">link</a>

，如果你有一组链接，你可以遍历它：

public links = ['link1','link2','link3'];

然后在你的模板：

<div class="wrap"> 
    <a class="link" *ngFor="let link of links">{{link}}</a> 
</div>

如果你只是想你singlePageApplication中导航，通常你只是使用routerLink指令。

<a routerLink="/my-path">link1</a>

来源

2017-05-24 23:50:32 ShabbY

@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); 
    } 
}

工作Plunkr

来源

2017-05-25 11:28:01

Angular 2中的多个元素的一个点击处理程序

回答

相关问题