Angular - 在焦点上显示/隐藏元素

Question

我有一个 input 元素和一个 ，如果输入被选中，我想显示它，但如果输入或其中一个项目被点击，则隐藏它。

<input type="text" (focusin)="showPropertiesList=true">
<ul *ngIf="showPropertiesList">
...
</ul>

我尝试在输入上添加focusout，但是当我尝试单击其中一个元素时隐藏了它，我也尝试了document.activeElement，但这似乎总是返回body标签，即使我点击了，怎么能这个解决了吗？

不确定是否重要，但 是绝对位置元素。

Answer 1

考虑使用 DIV 元素包装这两个元素，然后将焦点指令应用于它，如下所示：

<div (focusin)="show = true" (focusout)="show = false">
  <input>
  <ul *ngIf="show"> </ul>
</div>

Working Demo