Angular 13中ViewChild ElementRef初始化报错求助

这个报错是因为Angular 13默认启用了TypeScript的strictPropertyInitialization严格属性初始化检查，它要求类的所有属性必须在构造函数中完成初始化，或者明确告知TypeScript该属性可能为undefined。针对你的场景，有几种可行的解决方式：

• 使用非空断言操作符（!）
  直接在属性名后添加!，告诉TypeScript这个属性会被Angular框架初始化，不会为null或undefined，适合你设置了static: true的场景（组件初始化阶段就能获取到目标元素）：

  @ViewChild("text", { static: true }) text!: ElementRef;
  

• 将属性标记为可选（?）
  给属性添加?标记，表示该属性可能不存在，后续使用时需要通过可选链操作符（?.）做空值校验，适合不确定目标元素是否一定会渲染的场景：

  @ViewChild("text", { static: true }) text?: ElementRef;
  // 使用时示例
  this.text?.nativeElement.textContent = "示例文本";
  

• 构造函数初始化（不推荐）
  在构造函数中给属性赋一个临时值，绕开检查，但这种方式不符合ViewChild的设计逻辑，Angular后续会覆盖这个值，不建议使用：

  constructor() {
    this.text = {} as ElementRef;
  }
  @ViewChild("text", { static: true }) text: ElementRef;
  

• 关闭严格属性初始化检查（不推荐）
  在项目的tsconfig.json中修改编译器配置，关闭整个项目的严格属性初始化检查，但这会失去TypeScript的类型安全保障，生产项目不建议这么做：

  {
    "compilerOptions": {
      "strictPropertyInitialization": false
    }
  }
  

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