时间戳

首页 > 解决方案 > Advanced Angular @HostListener - 记录父组件中所有元素的点击（来自子组件）

javascript - Advanced Angular @HostListener - 记录父组件中所有元素的点击（来自子组件）

问题描述

我想将子组件的逻辑保留在其中。但是，事件本身是从其父组件向下发生单击时。

child.component.ts

@HostListener('document:click', ['$event']) onClick(event: MouseEvent) {

  // get the parent component tag
  const parentComponent = this.eRef.nativeElement.parentNode.parentNode;

  for (let i = 0, j = parentComponent.length; i < j; i++) {
    if (event.target == parentComponent[i]) {
        console.log(parentComponent[i]);
    }
  }

我已经尝试了很多方法来遍历节点列表并比较 click event.target 以查看点击是在内部parent还是外部，但我似乎无法迭代 nodeList 并且不明白为什么。

我在repro StackBlitz上也尝试了许多其他的东西。

也许有更好的方法来观察该组件父级外部/内部的点击？另外，我不想将点击逻辑移动到父级，除非必须，否则逻辑不属于那里。

已修复：StackBlitz 已经更新了我所有关于使用 elementRef 遍历 DOM 的研究。@Ritchie 也正确地循环了 nodeList 并让它以这种方式工作。

标签： javascriptangulareventsevent-handling

解决方案

您可以使用 的target属性MouseEvent来检查单击了哪个组件并将其与父节点名称进行比较。

@HostListener('document:click', ['$event.target']) onClick(event) {
    const parentEl = this.eRef.nativeElement.parentNode.tagName;

    const path = [];
    let currentElem = event;
    while (currentElem) {
      path.push(currentElem.tagName);
      currentElem = currentElem.parentElement;
    }
    console.log('Clicked inside parent: ', path.includes(parentEl));
}

Stackblitz 示例

推荐阅读