Angular使用ViewChild获取DOM元素时出现无初始化报错如何解决？

这个报错是TypeScript的严格类属性初始化校验规则触发的：你声明了map属性为ElementRef类型，但既没有在构造函数中为它赋值，也没有设置初始值，TypeScript默认判定该属性存在未定义的风险，因此抛出报错。
编辑器的快速修复只是简单给属性追加了| undefined联合类型，但没有解决你需要直接调用属性的需求。

推荐按优先级选择以下方案：

• 方案1：使用非空断言操作符（最优，适配你当前的代码场景）
  因为你模板中明确存在#el标记的元素，且ViewChild配置了static: true，Angular会在组件初始化阶段就完成该属性的赋值，你可以主动告诉TypeScript该属性必定有值，不需要做初始化校验：
  修正后的组件代码：

  import { Component, ElementRef, OnInit, ViewChild, AfterViewInit } from '@angular/core';
  export class SlideComponent implements OnInit, AfterViewInit{
  
    @ViewChild('el', { static: true}) map!: ElementRef; // 追加!非空断言
  
    constructor() { 
    }
  
    ngOnInit(): void {
    }
    ngAfterViewInit(){
      console.log(this.map.nativeElement);
    }
  }
  

• 方案2：保留undefined类型，调用时增加可选链校验
  如果你不想关闭TypeScript的校验逻辑，可以保留联合类型，调用属性时增加可选链操作符规避报错：

  @ViewChild('el', { static: true}) map: ElementRef | undefined;
  // 调用时写法
  console.log(this.map?.nativeElement);
  

• 方案3（不推荐）：全局关闭严格属性初始化校验
  可以在项目的tsconfig.json中配置compilerOptions.strictPropertyInitialization = false，全局关闭该校验规则，但是会丢失所有类属性的初始化校验能力，不建议使用。

如果你后续将ViewChild的static配置改为false，则该属性只能在ngAfterViewInit生命周期及之后访问，不能在ngOnInit中读取，否则会拿到undefined。

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