Javascript @HostListener的问题

我在一个角度组件中有以下代码，并按预期工作：

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

但这给我带来了一个问题。我的要求是在用户单击文本时打开组件，在用户单击组件外部时关闭它。问题是，由于文本在组件外部，所以单击它会调用上述方法，并且满足“if”条件，因此组件会立即关闭。

您的代码应该是

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

没有

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

---

你能发布你的孩子和父母的组件吗？你能在这里详细说明一下组件布局吗？我对angular不太精通。我没有看到这里的组件代码，但我将做我的猜测。当用户单击文本时，将标志设置为true，并在click hotlistener中检查标志是否与事件目标一起为true，然后相应地采取措施。如果两个条件都满足，则打开一个组件，否则关闭该组件。请提供一个，最好是堆栈闪电：）为什么没有

文档：单击
？