Angular - 如何解析 event.path 内的对象

现在这是一个很难解释的复杂问题，我会尽力解释。

我有一个弹出窗口，我想从中唯一地标识单击事件是来自弹出窗口内部还是外部。

我的第一个方法：我用一个包住了整个弹出框div与id，说“独特”。

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

注意：该索引将始终是动态的 - 但id将在其中一项指标中得到保证。我需要遍历到这里id。请帮忙。我附上了一些图像以便更好地可视化。

主机监听器：

事件对象：

通过扩展它，我们得到了唯一的父 ID：

The path事件的属性仅在 Chrome 中可用，并且未记录。您可以使用等效的composedPath() https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath，但 IE 和 Edge 还不支持。

如果您不关心这种支持，您可以这样做。看看我怎么用的ViewChild以获得正确的元素。这样更好，所以你不需要使用愚蠢的 ID：

@ViewChild('elementYouCareAbout',  {read: ElementRef}) element: ElementRef<any>;   

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

现在，如果您确实关心 IE 和 Edge 支持，还有另一种方法可以检查它，那就是使用parentElement https://developer.mozilla.org/en-US/docs/Web/API/Node/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
}

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