Angular 12中@ViewChild绑定ElementRef的初始化方法咨询

问题核心说明 #

你遇到的不是Angular 12强制要求在构造函数内初始化@ViewChild绑定的ElementRef，本质是Angular 12默认开启了TS的strictPropertyInitialization（严格属性初始化）检查规则，要求类的非可选属性必须在声明时或构造函数内完成赋值，才会抛出的类型报错。

首先明确一个原则：完全不需要手动在构造函数内初始化@ViewChild绑定的ElementRef，@ViewChild装饰的属性会由Angular框架在对应视图渲染完成后自动赋值，你手动在构造函数初始化的值只会被后续框架赋值覆盖，属于无效操作，还会增加异常风险。

正确解决方案 #

以下是符合规范的几种处理方式，按推荐优先级排序：

• 方案1：使用非空断言操作符，告诉TS该属性后续一定会被框架赋值，跳过构造函数初始化检查

// 直接加!后缀即可，不需要做其他额外处理
@ViewChild('fileInput') fileInput!: ElementRef;

配套注意：如果要访问该属性，统一放在ngAfterViewInit生命周期钩子中执行，此时视图已经渲染完成，属性已经完成赋值；如果绑定的是没有被*ngIf等结构指令控制的静态元素，还可以给@ViewChild增加static: true配置，让属性在ngOnInit阶段就可以访问：

@ViewChild('fileInput', { static: true }) fileInput!: ElementRef;

• 方案2：声明为可选属性，使用时配合可选链操作符规避空报错

@ViewChild('fileInput') fileInput?: ElementRef;

// 后续使用时的写法
this.fileInput?.nativeElement.click();

• 方案3：如果确实有特殊场景需要提前初始化一个ElementRef占位，可以在构造函数内传入null作为nativeElement的初始值

constructor() {
    // 仅特殊场景使用，普通@ViewChild场景完全不需要该操作
    this.fileInput = new ElementRef(null);
}

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