Javascript 侦听角度组件上的单击事件

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

前

组件

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

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

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的组件”，
模板：`
你好，我的名字是{{name}。
`
})
导出类MyComponent{
name=“Aj”
}

HTML-

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

//用户单击此处

---

现在，我如何收听组件本身上的单击？

与监视任何位置的单击的方式相同，使用（单击）=“myFunction”语法

详细信息可在此处的Angular docs中找到。

---

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

更新：拉胡尔·辛格的答案是正确的

---

使用

@组件

装饰器的

主机

属性：

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

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

---

在组件中使用

HostListener

。Ploppy给出的答案是可行的，但Angular告诉您在组件中使用

HostListener

，而不是像这样

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

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

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

}

---

但是你如何得到鼠标点击的坐标呢？这是正确的方法。回到那一天，文档还没有。@CodyBugstein您可以通过向

@HostListener

传递第二个参数来实现这一点，该参数表示传递给侦听函数的参数。因此，要获取

事件

对象，请执行：

@HostListener（'click'，['$Event']）onClick（Event:MouseEvent）{…}

（请参阅）