Angular 11使用模板引用变量时报‘属性未在构造函数明确分配’错误

这个报错是TypeScript 严格模式下 strictPropertyInitialization 规则触发的校验提示，和你 @ViewChild 的使用逻辑本身无关。TypeScript 的静态检查无法识别 Angular 装饰器在运行阶段对类属性的赋值行为，会默认判定你声明的 button: ElementRef 属性既没有声明时的初始值，也没有在类构造函数中完成明确赋值，因此抛出校验错误。

你当前项目是 Angular 11 + TypeScript 4.0 的技术栈，可以根据实际开发需要选择以下任意一种方案：

• 方案1：使用明确赋值断言（官方推荐写法）
  在属性类型声明后增加 ! 断言，主动告诉 TypeScript 这个属性后续一定会被赋值，跳过当前属性的静态初始化校验。修改后的代码如下：

  import { Component, ElementRef, ViewChild } from '@angular/core';
  
  @Component({
    selector: 'app-demo',
    template: `<button #button>测试按钮</button>`
  })
  export class DemoComponent {
    @ViewChild('button', { static: true }) button!: ElementRef;
  }
  

  这个方案不会改动全局 TypeScript 配置，仅针对当前被装饰器修饰的属性跳过校验，和 Angular 官方文档的标准写法完全一致，是首选方案。
• 方案2：将属性标记为可选属性
  在属性名后增加 ? 标识，把属性类型改为 ElementRef | undefined，从类型层面允许属性为初始空值状态。修改后的代码如下：

  @ViewChild('button', { static: true }) button?: ElementRef;
  

  这个写法的副作用是：后续在组件类中访问 button.nativeElement 时，TypeScript 会持续提示该属性可能为 undefined，需要你主动增加空值判断逻辑。
• 方案3：全局关闭初始化校验（不推荐）
  如果你不想逐个给装饰器修饰的属性加断言，可以在项目根目录的 tsconfig.json 的 compilerOptions 配置块中，关闭 strictPropertyInitialization 规则：

  "compilerOptions": {
    "strict": true,
    "strictPropertyInitialization": false
  }
  

  这种写法是全局关闭属性初始化校验，会漏掉类中其他真实漏写赋值逻辑的问题，仅适用于老旧项目临时兼容场景。

补充适配 Angular 11 的注意点
如果你的模板中被 #button 引用的元素被 *ngIf、*ngFor 这类结构指令包裹，需要把 @ViewChild 装饰器的 static 参数设置为 false，切换为动态查询模式，否则静态查询阶段无法拿到对应元素的引用，会在运行时返回空值。

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