Question

我有一个与焦点有关的问题。我需要的是在组件的onInit函数（第一个字段）中的字段上设置焦点状态。但是我无法正确地瞄准这个领域。

我试过了

export class EgrCrearRecetaComponent implements OnInit {
  @ViewChild('paciente') ePaciente; 
  ...
 }

和onInit函数

  ngOnInit() {
   this.buildForm();
   // try to set
   this.ePaciente.nativeElement.focus();
   ...
  }

这是我忘记告诉的，我正在使用反应形式，所以我不能使用#paciente，我正在使用

<input type="text" pInputText formControlName="paciente" class="form-control" placeholder="Dni Paciente">

thsi是组件中的formbuilder结构：

buildForm(): void {
this.recetaform = this.fb.group({
  paciente: ['', [<any>Validators.required, <any>Validators.minLength(7), <any>Validators.maxLength(9)]],
  femision: [this.fechaHoy(), [<any>Validators.required]],
  servicio: ['', [<any>Validators.required]],
  idServicio: ['', [<any>Validators.required]],
  turno: ['', [<any>Validators.required]],
  prestador: ['', [<any>Validators.required]],
  idPrestador: ['', [<any>Validators.required]],
  diagnostico: ['', [<any>Validators.required]],
  idDiagnostico: ['', [<any>Validators.required]],
  productofgn: this.fb.group({
    cb: [''],
    producto: [''],
    lote: [''],
    cant: [''],
    dias: [''],
  })
});

}

对不起朋友们。我一遍又一遍地得到同样的错误。

错误类型错误：无法读取未定义的属性“nativeElement”

Answer 1

将其移至AfterViewChecked（）

...
import { AfterViewChecked} from '@angular/core';
..

export class EgrCrearRecetaComponent implements OnInit, AfterViewChecked {
....
toFocus=true;
ngAfterViewChecked() {
   if (this.toFocus) {
       this. ePaciente.nativeElement.focus();
   }
   this.toFocus = false;
}

Answer 2

在初始化视图后聚焦您的字段：

ngAfterViewInit(){
    // Work around for "ExpressionChangedAfterItHasBeenCheckedError" 
    setTimeout(()=> { this.ePaciente.nativeElement.focus() }, 10);
}

这是一个有效的Plunker Demo

Answer 3

您应该使用另一个组件生命周期挂钩 - ngAfterViewInit，因为它的视图及其子视图初始化时会触发它。
https://angular.io/guide/lifecycle-hooks

同样在该钩子回调中使用setTimeout来确保第一次更改检测有机会运行并且元素被渲染（以便可聚焦输入）。您不必指定延迟参数，因为您只想等待下一个滴答。

ngAfterViewInit() {
    setTimeout(() => {
      this.ePaciente.nativeElement.focus();
    });
}

将焦点状态设置为字段+角度4

3 个答案: