angular8 - 在页面加载时关注 MatInput 给出错误

Question

页面加载输入应集中

<mat-form-field>
          <input matInput #element placeholder="username" >
                 
    <button type="button" (click)="focus()" class="btn btnStyles" >HighLight</button>

@ViewChild('element') ref:ElementRef;


focus(){
this.ref.nativeElement.focus(); 

}

单击 HighLight 按钮时，它会聚焦文本框，但是当我在 ngOnInit 上调用此方法时，它会给出错误无法读取未定义的属性“nativeElement”

ngOnInit() {
this.focus();
}

Answer 1

尝试实现AfterViewInit接口并专注于ngAfterViewInit()方法内部的输入（我猜，ngOnInit 有时会在视图尚未完全初始化时执行）：

export class ParentComponent implements OnInit, AfterViewInit {

   @ViewChild('element') ref:ElementRef;

   focus(){
      this.ref.nativeElement.focus(); 
   }
  
   ngAfterViewInit() {
      this.focus();
   }
}