角度-如何解析event.path内部的对象

Question

现在这是一个很难解释的问题，我将尽力而为。

我有一个弹出窗口，如果单击事件来自弹出窗口的内部或外部，我想从中唯一标识该事件。

我的第一种方法：我用div和id包围了整个弹出窗口，说“唯一”。

因此，我将click事件与主机侦听器绑定，将为其获取事件对象。因此，如果我遍历event.path --- 其中包含一个对象数组 ---在这些对象的索引之一内有一个字段id，该字段将我id的名字。

注意：此索引将始终是动态的-但在其中一个索引中将保证id。我需要遍历此id。请帮忙。我附加了一些图像，以实现更好的可视化。

主机侦听器：

事件对象：

通过扩展此代码，我们可以获得唯一的父ID：

Answer 1

事件的path属性仅在Chrome中可用，并且未记录。您可以使用等效的composedPath()，但IE和Edge尚不支持此功能。

如果您不关心该支持，则可以执行以下操作。了解如何使用ViewChild获取正确的元素。这样更好，因此您不需要使用愚蠢的ID：

@ViewChild('elementYouCareAbout') element: ElementRef<any>;   

@HostListener('document:click', ['$event']) onClick(event: MouseEvent) {
  const isInside = event.composedPath().includes(this.element.nativeElement);
}

现在，如果您确实关心IE和Edge支持，还有另一种检查方法，那就是使用parentElement属性：

@ViewChild('elementYouCareAbout') element: ElementRef<any>;   

@HostListener('document:click', ['$event']) onClick(event: MouseEvent) {
  let isInside = false;
  let target = event.target;
  while(target && !isInside) {
    isInside = this.element.nativeElement === target;
    target = target.parentElement;
  }

  // if inside than isInside is true
}

此代码尚未经过测试，请注意