Angular 16使用模板引用变量时divElem未初始化报错问题

这个错误是因为Angular 16默认启用了更严格的TypeScript严格属性初始化检查（strictPropertyInitialization），而@ViewChild装饰的属性是Angular在组件视图初始化阶段才注入的，TypeScript无法识别这一点，因此判定属性未初始化。以下是几种可行的解决方法：

• 添加非空断言操作符
  直接告诉TypeScript该属性一定会被赋值，不会为null或undefined：

  @ViewChild('browseShopItems', { read: ElementRef }) divElem!: ElementRef;
  

  注意：使用该操作符后，要确保在ngAfterViewInit钩子之后再访问属性，避免出现实际为undefined的情况。

• 声明联合类型并初始化
  明确属性可能为undefined，后续使用时通过可选链操作符做安全访问：

  @ViewChild('browseShopItems', { read: ElementRef }) divElem: ElementRef | undefined = undefined;
  

  使用示例：

  ngAfterViewInit() {
    this.divElem?.nativeElement.classList.add('active');
  }
  

• 临时关闭严格属性检查（不推荐）
  如果不想修改代码，可以在tsconfig.json的compilerOptions中关闭严格属性初始化，但这会降低TypeScript的类型检查能力，不建议长期使用：

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

另外需要注意：@ViewChild装饰的元素只有在组件视图初始化完成后才会被赋值，所以务必在ngAfterViewInit生命周期钩子中访问该属性，避免出现未定义的问题。

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