Angular页面加载时设置MatInput聚焦报nativeElement未定义错误如何解决

问题原因 #

ngOnInit是组件初始化阶段执行的钩子，此时组件的DOM视图还未完成渲染挂载，通过@ViewChild查询的元素引用尚未被赋值，因此this.ref为undefined，访问nativeElement属性就会抛出对应错误。

解决方法 #

方法1：使用正确的生命周期钩子调用 #

把聚焦逻辑放到ngAfterViewInit钩子中执行，这个钩子会在组件视图完全渲染完成后触发，此时@ViewChild查询的元素已经完成赋值：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 你的组件配置
})
export class YourComponent implements AfterViewInit {
  @ViewChild('element') ref: ElementRef<HTMLInputElement>;

  ngAfterViewInit(): void {
    // 增加非空判断避免报错
    if (this.ref?.nativeElement) {
      this.ref.nativeElement.focus();
    }
  }

  // 原有的点击聚焦方法可正常保留
  focus() {
    this.ref.nativeElement.focus();
  }
}

如果出现ExpressionChangedAfterItHasBeenCheckedError报错，可把聚焦逻辑包一层微任务延迟执行：

ngAfterViewInit(): void {
  setTimeout(() => {
    this.ref?.nativeElement.focus();
  }, 0)
}

方法2：使用Angular CDK内置的自动聚焦指令（更简便） #

Angular Material配套的CDK已经封装了初始化自动聚焦的能力，不需要手写TS逻辑，直接在input上添加cdkFocusInitial属性即可：

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

使用该方法需要先在对应模块中导入@angular/cdk/a11y下的A11yModule。

注意：如果你的输入框被*ngIf等结构指令包裹，初始时不渲染，需要等其渲染条件为真后再调用聚焦逻辑，可以配合@ViewChild的setter写法监听元素挂载：

@ViewChild('element') 
set ref(el: ElementRef<HTMLInputElement>) {
  if (el) {
    el.nativeElement.focus();
  }
}

内容的提问来源于stack exchange，提问作者xyz