setTimeout()无法正常工作，如何在输入字段中获得焦点

Question

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

HTML

<custom-input #name id="name" formControlName="name"
ngDefaultControl  maxlength="3" minlength="2">
</custom-input>

弹出模式组件.ts

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

parent.com.ponent.html

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

parent.com组件.ts

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

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

Answer 1

将超时设置为100。确保z顺序最高。焦点只作用于最高层。

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

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

Answer 2

问题是，当您将open变量设置为true时，元素仍然不会以HTML呈现。要做到这一点，您需要手动强制更改检测，而且您也不需要再使用setTimeout。

父组件.ts

constructor(private changeDetectorRef: ChangeDetectorRef) {}
openPopUp() {
this.popUpChild.popUp.nativeElement.open= true;
this.changeDetectorRef.detectChanges();
this.popUpchild.name.nativeElement.focus();
}