Advanced Angular @HostListener - регистрация кликов для всех элементов в родительском компоненте (от дочернего) - PullRequest
Новая
       43

Advanced Angular @HostListener - регистрация кликов для всех элементов в родительском компоненте (от дочернего)

1 голос
/ 24 мая 2019

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

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

Я пробовал много вещей, чтобы перебрать список узлов и сравнить click event.target, чтобы увидеть, был ли клик внутри parent или снаружи, но я не могу перебрать нодлист и не понимаю, почему .

Я попробовал и много других вещей здесь, на репро StackBlitz .

Возможно, есть гораздо лучший способ отслеживать клики снаружи / внутри родительского элемента этого компонента? Кроме того, я не хочу перемещать логику щелчка к родителю, логике там не место, если только она не должна быть.

ИСПРАВЛЕНО: StackBlitz был обновлен всеми моими исследованиями обхода DOM с помощью elementRef. Также @Ritchie правильно перебрал нодлист и заставил его так работать.

1 Ответ

1 голос
/ 24 мая 2019

Вы можете использовать свойство target MouseEvent, чтобы проверить, какой компонент был выбран, и сравнить его с именем родительского узла.

@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

...