Angular setTimeout（）工作不正常，如何在输入字段中获取焦点？

我想在弹出模式加载时实现对输入的关注

HTML

parent.component.html

<popup-modal #childComponent" >
</popup-modal>

---

我试图从父级打开模式弹出窗口，并在名称输入中设置焦点，但有时会出现，有时不是因为设置超时。如何在每次打开模式弹出窗口时在名称输入字段中实现焦点？

问题是，当您将

open

变量设置为true时，元素仍然没有以HTML呈现。要做到这一点，您需要手动强制，也不需要再使用

setTimeout

parent.component.ts

构造函数（私有changeDetectorRef:changeDetectorRef）{}
openPopUp（）{
this.popUpChild.popUp.nativeElement.open=true；
this.changeDetectorRef.detectChanges（）；
this.popUpchild.name.nativeElement.focus（）；
}

问题在于，当您将

open

变量设置为true时，元素仍然没有以HTML呈现。要做到这一点，您需要手动强制，也不需要再使用

setTimeout

parent.component.ts

构造函数（私有changeDetectorRef:changeDetectorRef）{}
openPopUp（）{
this.popUpChild.popUp.nativeElement.open=true；
this.changeDetectorRef.detectChanges（）；
this.popUpchild.name.nativeElement.focus（）；
}

将超时设置为100。确保z顺序是最高的。“聚焦”仅适用于最高层

此外，DOM渲染在每个更新周期结束时完成。当您输入一个小的超时延迟时，它将为DOM提供渲染时间。这意味着所有视图都已准备就绪。还有其他方法，但这是最简单的

---

Z顺序将任何元素带到顶部。使用材料组件非常重要。

将超时设置为100。确保z顺序是最高的。“聚焦”仅适用于最高层

此外，DOM渲染在每个更新周期结束时完成。当您输入一个小的超时延迟时，它将为DOM提供渲染时间。这意味着所有视图都已准备就绪。还有其他方法，但这是最简单的

---

Z顺序将任何元素带到顶部。使用材料组件非常重要。

将超时设置为100。确保z顺序是最高的。焦点仅在最高层工作。将超时设置为100。确保z顺序是最高的。“聚焦”仅适用于最高层。

  @ViewChild('name', { static: true }) name: ElementRef;

<popup-modal #childComponent" >
</popup-modal>

  openPopUp() {

this.popUpChild.popUp.nativeElement.open= true;
 setTimeout(() => {
   this.popUpchild.name.nativeElement.focus();
 }, 0);
}