Angular中TS文件引用file input调用click方法报错解决方案

@ViewChild('fileInput')获取到的是Angular封装的ElementRef实例，不是原生<input>DOM元素，这个实例本身没有click()方法，真实的DOM节点存储在它的nativeElement属性上，直接对ElementRef实例调用click()就会触发你看到的类型错误。

• 第一步：修改调用逻辑，访问nativeElement拿到真实DOM后再触发点击，建议加上TS类型断言获得完整的类型提示：

  // 替换原来的 this.fileInput.click()
  (this.fileInput.nativeElement as HTMLInputElement).click();
  

  也可以在定义ViewChild的时候就指定泛型类型，后续调用更简洁：

  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
  
  // 后续调用
  this.fileInput.nativeElement.click();
  

• 第二步：检查ViewChild的配置和调用时机，避免元素获取失败：
  • 如果你需要在ngOnInit生命周期内就访问这个文件输入框，给@ViewChild添加static: true配置：

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

  • 如果是在ngAfterViewInit生命周期之后、用户交互事件、Observable异步回调中调用，保持默认的static: false配置即可，注意不要在视图初始化完成前执行点击逻辑，否则会出现fileInput是undefined的错误。
  • 如果Observable的回调是普通function写法，注意this指向问题，优先使用箭头函数保证this指向当前组件实例，避免上下文丢失导致找不到属性。

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