Javascript 角度-如果形状块处于焦点，则显示输入

我在angular中得到了一个类似这样的表单（删除上下文的缩写版本）：

试过这样的方法：

<form [formGroup]="myForm">
    Name: <input type="text" formControlName="myName">
    <div tabindex="-1" (focusout)="genderFocused = false">
        Gender: <input type="text" formControlName="myGender" (focus)="genderFocused = true">
        <label>Yes<input type="radio"></label>
        <label>No<input type="radio"></label>
    </div>
</form>

姓名：
性别：
对
不

然而，当我点击其中一个单选按钮时，它们立即消失。我环顾四周，没有发现任何有助于我解决这个问题的东西

---

我将单选按钮替换为一个文本输入字段，它的行为与此完全相同。一旦div中的输入字段被聚焦，它就会消失，这不是预期的

您可以使用@HostListener检查元素是否在外部单击，并为*ngIf条件设置一个标志：

 @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.clickedOutside = false;
    } else {
      this.clickedOutside = true;
    }
  }

正如这一回答所表明的那样：

---

如果我在整个组件外单击，这是可行的，但我只想将此逻辑简化为表单的性别部分，而不必在其周围创建整个组件。好的，我不熟悉其他方法，但对我来说，听起来您有一些与DOM的某个部分相关的功能，那么为什么它不应该是一个特定的组件呢？现在我想起来了，你是对的。它实际上应该是一个组成部分

<form [formGroup]="myForm">
    Name: <input type="text" formControlName="myName">
    <div tabindex="-1" (focusout)="genderFocused = false">
        Gender: <input type="text" formControlName="myGender" (focus)="genderFocused = true">
        <label>Yes<input type="radio"></label>
        <label>No<input type="radio"></label>
    </div>
</form>

 @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.clickedOutside = false;
    } else {
      this.clickedOutside = true;
    }
  }