高级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]);
    }
  }

我已经尝试了很多事情来通过节点列表进行迭代并比较点击事件。要查看点击是在parent内部还是外部，但我似乎无法迭代节点符，并且不明白为什么。<<<<<</p>

我在repro stackblitz上也尝试了许多其他事情。

也许有一种更好的方法可以观看该组件父母外部/内部的点击？另外，我不想将点击逻辑移至父母，除非必须是逻辑。

固定：我所有关于使用ElementRef穿越DOM的研究都对Stackblitz进行了更新。@Ritchie也正确地通过节点词并以这种方式工作。

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示例