javascript - 监听 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 -

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

}