Angular 2 中多个元素的一键式处理程序答案

【问题标题】：One click handler for multiple elements in Angular 2Angular 2 中多个元素的一键式处理程序
【发布时间】：2017-10-25 10:46:29
【问题描述】：

假设我们有一个 div，里面有 3 个链接。

<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">，这个我比较喜欢。

描述的案例有更好的实现方式吗？

【问题讨论】：

标签： javascript jquery angular angular2-directives

【解决方案1】：

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

【讨论】：

【解决方案2】：

其实这取决于你想做什么。但是，如果您只想分配一个 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>

【讨论】：

【解决方案3】：

@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

【讨论】：

【解决方案4】：

在我看来，最好的方法是使用指令并可能解析内部 HTML 以组成有效链接，如 here 中所述

【讨论】：