Как найти связь между целью события Hostlistener с ElementRef?

Question

Мне нужно знать, что получатели цели клика являются дочерними для моего element из viewChild или вне его. Можно ли это найти?

Я не получаю решения.

вот код:

import { Component, ViewChild, HostListener, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

 @ViewChild('child') element:ElementRef;

 @HostListener('document:click', ['$event.target']) onClick(event) {
      const parent = this.element.nativeElement;

      if(event is childOf(parent)) {
        //
      } else {
        //
      }

     console.log(parent, event);
  }

  name = 'Angular';

}

Как этого добиться? Live Demo

Кто-нибудь, помогите мне, пожалуйста?

Answer 1

Node.contains () метод должен быть тем, что вы ищете.

if(parent.contains(event)) {
  console.log('child')
} else {
  console.log('not a child')
}

Forked Stackblitz

Answer 2

пожалуйста, попробуйте использовать этот подход

if (document.getElementById('idOfParentElement').contains(event.target)) {
// do something
}