如何检测Angular组件外部的click事件？

在成角度的情况下，通过不同方式检测点击。由于单击是事件，因此在组件内部可以通过简单的事件绑定检测到它。通过事件绑定的简单单击，可以在组件内进行检测，如下所示：

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

为了继续检测组件外部的单击，在角度中使用了@HostListener装饰器。它是一个装饰器，它声明一个DOM事件以侦听并提供与处理程序方法的链接，以在该事件发生时运行。

方法：这里的方法是使用@HostListener装饰器。从角度上讲，它是一个装饰器，可以帮助捕获DOM内部发生的任何类型的事件，并为开发人员提供了基于该事件执行任何操作的灵活性。在这里，在简单单击事件上，处理程序将把单击事件引用到组件上，并在整个DOM上单击，它将使用document：click捕获。

使用HostListener的语法如下：

句法：

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

HostListener的语法中需要注意三件事：

1. eventName：顾名思义，它采用了DOM中需要监听的事件的名称。
2. args：这些是在事件发生时传递给处理程序方法的参数集。它以列表格式输入。
3. handlen_name：这是触发事件时将调用的方法定义。 HostListener自动调用它。

示例：与组件内的click绑定要绑定组件内的click，将在hostListener中使用的eventName将简单地为“ click”。在这种情况下，以上代码将写为：

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

输出：

此处无需传递参数以使处理程序运行。 HostListener将“点击”作为触发点击方法的事件。

与外部单击组件绑定
为了检测组件外部的点击，将考虑另一个事件。在这里，单击不会起作用，因为它会检测到组件内的单击。这里的关键是在DOM中寻找点击，而不仅仅是在组件中寻找，因此’document：click’将是正确的选择，同时我们也需要在组件中过滤掉事件通过布尔变量“ inside”。因此，在下面给出的代码中，将添加另一个组件，该组件将充当外部上下文，但是单击该组件将导致当前组件上的click事件。

@Component({
  selector: "another",
  template: `
    

      
Outside Component
      
Click here for outer component trigger
    
    
  `
})
export class AnotherComponent {
  constructor() {}
}
@Component({
  selector: "geeks",
  template: `
    

      
Inner Component
      
{{ some_text }}
    
  `
})
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;
  }
}

输出：

在此示例中，如果单击文本“外部组件”，则显示的文本将是“事件触发的外部组件”。这显示了如何在GeeksComponent内捕获组件外部的单击。