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

Question

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

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 并让它以这种方式工作。

Answer 1

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

@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 Example