Angular实现点击上传按钮隐藏及fileField属性不存在报错修复

这个报错和ngIf的关联，本质是Angular 严格模板模式下的作用域识别规则触发的：
ngIf属于结构型指令，会在运行时动态创建、销毁对应的DOM节点，模板里用#定义的本地模板引用（比如你用的#fileField），作用域仅在当前ngIf块的内部生效。一旦你在ngIf块外部直接引用#fileField，模板类型检查器会自动把fileField识别为当前组件类的实例属性，因为TS代码里没有对应声明，就会抛出Property 'fileField' does not exist on type 'SourceComponent'的错误。
另外如果你在组件类方法里直接把fileField当类属性调用，没有通过装饰器拿到对应的模板引用，也会触发同类报错。

• 调整DOM结构，把文件上传input移出会被ngIf条件控制的块
  你不需要把input嵌在会被隐藏的上传按钮内部。可以把input放在模板固定位置，用CSS做视觉隐藏，通过按钮点击事件触发文件选择弹窗，从根源上避免input被ngIf销毁导致的引用丢失问题：

  <!-- 固定存在的隐藏file input，不受*ngIf控制 -->
  <input #fileField type="file" class="hidden-input" (change)="onFileSelected()">
  <!-- 上传按钮，仅在未进入上传状态时显示 -->
  <button *ngIf="!isUploading" (click)="openFilePicker()">选择上传文件</button>
  <!-- 替换按钮的进度条，仅在上传状态下显示 -->
  <div *ngIf="isUploading">
    <progress [value]="uploadProgress" max="100"></progress>
  </div>
  

• 在组件TS代码中正确声明模板引用
  配合上面的DOM结构，通过@ViewChild装饰器拿到input的DOM节点引用，加上明确的类型标注适配严格检查规则：

  import { ViewChild, ElementRef } from '@angular/core';
  // 对应模板中#fileField的引用，非空断言避免未初始化的类型提示
  @ViewChild('fileField') fileField!: ElementRef<HTMLInputElement>;
  // 触发文件选择弹窗的方法
  openFilePicker() {
    this.fileField.nativeElement.click();
  }
  

• 如果必须保留input在ngIf块内的场景
  不要在ngIf块外部跨域引用#fileField，所有对input的操作都要放在当前*ngIf块的作用域内完成；如果需要在类方法中操作这个条件渲染的input，要给@ViewChild加上{ static: false }配置，匹配Angular对动态节点的查询时机。

• 不要在*ngIf块外部直接把#fileField当组件属性做模板绑定，这类跨块引用会直接触发类型检查报错
• 高版本Angular的严格模板检查默认开启，所有跨结构型指令块的模板引用，都必须在类中通过@ViewChild显式声明，不能直接在模板跨块引用

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