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

Question

我想在弹出模式加载时重点关注输入HTML

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

popup-modal.component.ts

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

parent.component.html

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

parent.component.ts

  openPopUp() {

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

我试图从父级打开模式弹出窗口，并将焦点设置在名称输入中，但是有时它不是由setTimeout引起的。打开模式弹出窗口时，如何每次在名称输入字段中获得焦点？

Answer 1

问题是，当您将open变量设置为true时，该元素仍未以HTML呈现。为此，您需要手动强制Change Detection，并且也不再需要使用setTimeout。

parent.component.ts

constructor(private changeDetectorRef: ChangeDetectorRef) {}

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