如何检测Angular组件外的点击事件

在angular中，点击是通过不同的方式检测的。由于点击是一个事件，因此在一个组件内，它可以通过简单的事件绑定来检测。一个简单的通过事件绑定来检测组件内的点击的方法如下。

@Component({
  selector: "geeks",
  template: `
<h1 (click)="clicked()">{{ some_text }}</h1>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  clicked() {
    this.some_text = "Event Triggered";
  }
}

为了检测组件外的点击，在angular中使用了@HostListener装饰器。这是一个装饰器，它声明了一个要监听的DOM事件，并提供了一个处理方法的链接，以在该事件发生时运行。

办法。这里的方法是使用@HostListener装饰器。在angular中，它是一个装饰器，有助于捕捉DOM中发生的任何类型的事件，并让开发者灵活地执行基于该事件的任何行动。在这里，对于简单的点击事件，处理程序将把点击事件引用到组件上，对于在整个DOM上的点击，它将使用document:click来捕获。

使用HostListener的语法给出如下。

语法:

@HostListener(events, args)
handler_name(args){
  // Do something
}

在HostListener的语法中，有三件事需要注意。

事件名称。顾名思义，它接收DOM中需要被监听的事件的名称。

args: 这些是一组参数，当事件发生时传递给处理方法。它以列表的形式接受输入。
handlen_name：这里是方法定义，当事件被触发时将被调用。它被HostListener自动调用。

例子。绑定组件内的点击对于绑定组件内的点击，hostListener内的事件名称将是简单的 “点击”。在这种情况下，上面的代码将被写成:

@Component({
  selector: "geeks",
  template: `
    <h1>{{ some_text }}</h1>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  @HostListener("click")
  clicked() {
    this.some_text = "Event Triggered";
  }
}

输出:
如何检测Angular组件外的点击事件？

这里不需要为处理程序的运行传递参数。HostListener将’click’作为触发clicked方法的事件。

通过点击外部组件进行绑定
为了检测组件外的点击，需要查看另一个事件。这里的点击将不起作用，因为它检测的是组件内的点击。这里的关键是寻找DOM内的点击，而不仅仅是组件，因此 “document:click “将是正确的选择，同时我们需要过滤掉组件内的事件，这可以通过布尔变量 “inside “来完成。因此，在下面的代码中，将有另一个组件被添加到其中，它将作为外部环境，但点击它将导致当前组件的点击事件。

@Component({
  selector: "another",
  template: `
    <div style="border-style: solid;margin:5px;">
      <h1>Outside Component</h1>
      <h2>Click here for outer component trigger</h2>
    </div>
    <geeks></geeks>
  `
})
export class AnotherComponent {
  constructor() {}
}
@Component({
  selector: "geeks",
  template: `
    <div style="border-style:solid;margin:5px;">
      <h1>Inner Component</h1>
      <h2>{{ some_text }}</h2>
    </div>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  inside = false;
  @HostListener("click")
  clicked() {
    this.inside = true;
  }
  @HostListener("document:click")
  clickedOut() {
    this.some_text = this.inside
      ? "Event Triggered"
      : "Event Triggered Outside Component";
    this.inside = false;
  }
}

输出:
如何检测Angular组件外的点击事件？
在这个例子中，如果有一个点击 “外部组件 “的文本，那么显示的文本将是 “事件触发的外部组件”。这表明在GeeksComponent中，组件外的点击将被捕获。