Angular 16如何通过代码设置焦点？调用方法时nativeElement为undefined

API 探路者

2026-7-10

解决Angular中ViewChild获取元素nativeElement未定义的问题

下面是几种常见的排查和解决思路：

1. 检查元素是否被条件渲染

如果你的<input #autocomplete>是放在*ngIf这类结构指令里的，调用方法时元素可能还没被渲染到DOM，导致ViewChild拿不到实例。

换成[hidden]替代*ngIf（[hidden]只是隐藏元素，DOM中始终存在）；
或者确保调用mostrarModalLocalizacao时，元素已经渲染完成，比如在ngIf条件变为true后延迟调用（用setTimeout），或者在AfterViewChecked钩子中判断元素是否存在后再执行逻辑。

2. 调整ViewChild的static配置

你设置了static: false，这种情况下ViewChild会在ngAfterViewInit之后才完成赋值，如果调用方法的时机早于这个钩子，就会出现未定义。

确保调用方法的时机在ngAfterViewInit之后；
如果需要在初始化阶段调用，把static改成true（仅限元素在初始渲染时就存在的场景）：

@ViewChild('autocomplete', { static: true }) autocomplete: ElementRef<HTMLInputElement> = {} as ElementRef;

3. 安全访问nativeElement

在访问前先判断autocomplete是否存在，避免直接访问报错：

mostrarModalLocalizacao(){
    this.autocomplete?.nativeElement?.focus();
    this.visivel = true;
}

4. 监听动态元素的变化

如果元素是动态添加的，用ViewChildren结合QueryList的changes事件监听元素出现：

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

@ViewChildren('autocomplete') autocompleteList: QueryList<ElementRef<HTMLInputElement>>;

ngAfterViewInit() {
    this.autocompleteList.changes.subscribe(list => {
        const inputElement = list.first;
        if (inputElement) {
            inputElement.nativeElement.focus();
        }
    });
}