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

Question

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

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

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

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

注意:此索引将始终是动态的 - 但 id 将在索引之一中得到保证。我需要遍历直到这个id。请帮忙。我附上了一些图像以便更好地可视化。

主机监听器:

事件对象:

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

Answer 1

事件的 path 属性仅在 Chrome 中可用，且未记录。您可以使用等效的 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属性:

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

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