Question

假设我们有一个内部有3个链接的div。

<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()">，但对我来说，这看起来很奇怪。另一种选择是使用指令并做类似的smth <a class="link" [directive]="value">，这个我更喜欢。

是否有更好的实施描述案例？

Answer 1

实际上这取决于你想做什么。但是，如果您只想分配一个clickHandler，那么您通常会使用（click）指令。为什么这对你来说很奇怪？

如果您想访问处理程序中的ClickEvent，请将$arr=array ( array ( 'id' => 5 ), array ( 'id' => 9 ), array ( 'id' => 2 ) ); $new_arr = array_filter($arr, function ($elem) { return $elem['id'] > 10 }); if(count($new_arr)==0){ echo 'Nothing found'; }参数传递给您的回调，如下所示：$event

如果你有一系列链接，你可以迭代它：

<a class="link" (click)="callback($event)">link</a>;

然后在你的模板中：

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

如果您只想在singlePageApplication中导航，通常只需使用<div class="wrap"> <a class="link" *ngFor="let link of links">{{link}}</a> </div>指令。

routerLink

Answer 2

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

Answer 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

Answer 4

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

中所述

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

4 个答案: