时间戳

首页 > 解决方案 > Angular document.addEventListener 监听外部点击

angular - Angular document.addEventListener 监听外部点击

问题描述

我有一些代码可以监听元素内部和外部的点击..

这是javascript上的代码。

document.addEventListener('click', (event) => {
 const isClickInside = this.nav.contains(event.target);
 if (!isClickInside) {
   if (this.dropdown.style.display === 'grid') {
     this.dropdown.style.display = 'none';
     this.button.innerHTML = 'menu';
    }
  }
});

当我把它放在 ngOnInit 中时，这有效......但我想知道如何以角度方式完成。我正在使用 Angular 11 顺便说一句。

我该怎么做？

标签： angulartypescript

解决方案

您可以使用HostListener为组件内部和外部的每个单击事件创建一个处理程序

  @HostListener("click", ["$event"]) inClick(e: MouseEvent) {
    e.stopPropagation();
    this.clickStatus = "inside click";
  }

  @HostListener("document:click") outClickHandler() {
    this.clickStatus = "outside click";
  }

e.stopPropagation() 防止组件内部的点击事件冒泡到父元素，否则会触发outClickHandler

停止传播

stackblitz 演示

另一种方法是使用与您的问题相同的单一方法

零件

export class NavComponent {
  
  clickStatus = "";
    //  ElementRef : a wrapper around a native element inside of a View.
  constructor(private el: ElementRef) {}

  @HostListener("document:click", ["$event"]) outClickHandler(e: MouseEvent) {
    if (this.el.nativeElement.contains(e.target)) {
      this.clickStatus = "inside click";
    } else {
      this.clickStatus = "outside click";
    }
  }

stackblitz 演示

推荐阅读