Angular中如何判断ViewChild获取的原生元素是否存在

你遇到的报错本质是层级访问的逻辑错误：当*ngIf条件不成立时，被控制的optionB元素不会被渲染到DOM中，此时@ViewChild("optionB")装饰器绑定的optionB变量本身的值就是undefined。你原来的判断逻辑直接访问this.optionB.nativeElement，相当于读取undefined上的属性，会直接抛出类型错误，根本走不到后续的三元判断分支。

1. 调整判断层级 #

先判断@ViewChild返回的实例本身是否存在，再访问实例上的nativeElement属性，不要跳过外层判断直接读内部属性。

2. 注意动态元素的读取时机 #

*ngIf控制的是动态渲染元素，@ViewChild默认的static: false配置（Angular 8+默认值）会自动在元素渲染后更新引用，但不要在组件视图初始化完成前、或者刚修改*ngIf绑定条件后立刻读取元素，避免拿到空引用。
如果需要在修改*ngIf条件后立刻读取元素，可以先注入ChangeDetectorRef调用detectChanges()强制同步更新视图，再执行读取逻辑。

模板部分不需要调整，TS文件参考如下写法：

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html'
})
export class YourComponent implements AfterViewInit {
  // 固定存在的元素可以用!标记非空
  @ViewChild("optionA") optionA!: ElementRef<HTMLInputElement>;
  // 动态渲染的元素加?标记可选，明确它可能不存在
  @ViewChild("optionB") optionB?: ElementRef<HTMLInputElement>;

  constructor(private cdr: ChangeDetectorRef) {}

  // 业务方法
  method() {
    // 固定元素判断
    if (this.optionA) {
      console.log('A选项选中状态：', this.optionA.nativeElement.checked);
    }

    // 动态元素：先判断实例存在，再访问内部属性
    if (this.optionB) {
      console.log('B选项选中状态：', this.optionB.nativeElement.checked);
    }
  }

  ngAfterViewInit(): void {
    // 视图初始化完成后再执行DOM读取逻辑
    this.method();
  }

  // 示例：切换B选项显示状态后读取值
  toggleOptionB(show: boolean) {
    this.showOptionB = show;
    // 强制同步更新视图，避免立刻读取拿不到元素
    this.cdr.detectChanges();
    this.method();
  }
}

• 不要给*ngIf控制的动态元素配置static: true，该配置仅适用于组件初始化时就常驻的静态元素，配置后动态渲染的元素永远不会被@ViewChild捕获到。
• 如果后续你要监听这类动态元素的渲染/销毁动作，也可以换成@ViewChildren搭配QueryList.changes订阅来实现，适合多动态元素的场景。

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