Angular - Как мне разобрать объекты во внутреннем event.path

Question

Теперь это сложная проблема, которую нужно объяснить, я постараюсь изо всех сил.

У меня есть всплывающее окно, из которого я хочу однозначно определить событие щелчка, если оно находится внутри или снаружи всплывающего окна.

Мой первый подход: я окутал весь поповер div id, скажем «unique».

Итак, я связал событие click с прослушивателем хоста, для которого я будуполучить объект события.Итак, если я пройду через event.path --- , он содержит массив объектов --- внутри одного из индексов этих объектов находится поле id, которое даст мне имя моегоid.

Примечание: этот индекс всегда будет динамическим, но id будет гарантирован в одном из индексов.Мне нужно пройти до этого id.Пожалуйста помоги.Я приложил несколько изображений для лучшей визуализации.

Хост-слушатель:

Объект события:

Расширяя это, мы получаем уникальный родительский идентификатор:

Answer 1

Свойство path для события доступно только в Chrome и не имеет документов.Вы можете использовать эквивалент composedPath(), но IE и Edge пока не поддерживают это.

Если вам не нужна эта поддержка, вы можете сделать что-то подобное.Посмотрите, как я использовал ViewChild, чтобы получить правильный элемент.Так будет лучше, поэтому вам не нужно использовать глупые идентификаторы:

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

этот код не тестируется, поэтому следует помнить