Проблема с @HostListener

Question

У меня есть следующий фрагмент кода внутри углового компонента и работает как положено:

@HostListener('document:click', ['$event'])
onClick(event) {
 if(!this.eRef.nativeElement.contains(event.target)) {
  console.log("clicked outside");
  // code to close the component
 }
}

Но это вызывает у меня проблему.Мое требование - открывать компонент, когда пользователь нажимает на текст, и закрывать его, когда пользователь нажимает вне компонента.Проблема в том, что, поскольку текст находится за пределами компонента, поэтому нажатие на него вызывает вышеуказанный метод и условие «если» выполняется, и, следовательно, компонент немедленно закрывается.

Answer 1

Ваш код должен быть

@HostListener("click", ["$event"])

Нет

@HostListener('document:click', ['$event'])