收听Angular组件上的click事件

Question

如何在组件上侦听click事件并在组件上调用方法？

前 -

零件

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

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

HTML -

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

现在我该怎么听点击组件本身？

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

}

Answer 2

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

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

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

Answer 3

与监视任意位置单击的方式相同，使用 (click)="myFunction" 语法。

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

当您说“在组件本身上”时，如果您的意思是不希望父元素侦听单击，则只需将（单击）处理程序放在组件模板中而不是父级的标记中即可。在这种情况下，家长将不会意识到捕获的点击。