监听 Angular 组件上的点击事件

Question

如何在组件上监听点击事件并调用组件上的方法？

示例：

组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. </div>
   `
})
export class MyComponent {
  name = "Aj"
}

HTML -

(HTML - Hypertext Markup Language)

<my-component></my-component> // user clicks here

现在我应该如何监听组件本身的点击事件呢？

- Ajey

Answer 1

在您的组件中使用HostListener。Ploppy提供的答案是可以工作的，但Angular建议您改为在组件中使用HostListener，像这样：

import { HostListener  } from "@angular/core";

@Component({
  [...]
})
export class MyComponent {

  @HostListener("click") onClick(){
    console.log("User Click using Host Listener")
  }

}

- Rahul Singh

---

但是你如何获取鼠标点击的坐标？ - CodyBugstein

这是正确的做法。早些时候，文档不够充分。 - Ploppy

您可以通过向 @HostListener 传递第二个参数来表示传递给监听函数的参数来实现这一点。因此，要获取Event对象，请执行以下操作:@HostListener('click', ['$event']) onClick(event: MouseEvent) { ... }(请参阅此处)。 - Tazaf

Answer 2

更新：Rahul Singh 给出了正确的答案

---

使用 @Component 装饰器的 host 属性：

@Component({
  ...,
  host: { '(click)': 'onClick()'}
})

export class MyComponent {
  private onClick() {
    console.log('onClick');
  }
}

- Ploppy

Answer 3

与任何地方的点击监视方式相同，使用 (click)="myFunction" 语法。

详细信息可以在 Angular 文档中找到。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

当您说“在组件本身上”，如果您的意思是不希望父元素监听点击事件，则只需将 (click) 处理程序放置在组件模板中，而不是父级标签中。在这种情况下，父级将不知道已捕获的点击事件。

- Aaron Martin-Colby