Angular使用自定义DndDirective时报fileBrowseHandler不存在错误如何解决

报错根本原因 #

报错与DndDirective的导出配置无关，是你在UploadResumeComponent对应的HTML模板中，给文件选择input绑定了fileBrowseHandler事件处理方法，但UploadResumeComponent类中未定义该方法，Angular编译模板时找不到对应属性导致报错。

解决方案 #

方案1：在UploadResumeComponent中定义处理方法（适合业务逻辑写在组件内的场景）

直接在UploadResumeComponent的TS文件中新增对应方法即可：

// upload-resume.component.ts
export class UploadResumeComponent {
  // 新增该方法，写入你的文件处理逻辑
  fileBrowseHandler(files: FileList): void {
    // 示例：打印文件、调用上传接口、预览等
    console.log('选中的文件列表：', files);
  }
}

方案2：将文件选择逻辑统一放到DndDirective中处理（适合拖拽、点击选择逻辑复用的场景）

需要修改3处代码：

1. 给DndDirective新增exportAs配置和对应处理方法：

// dnd.directive.ts
import { Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appDnd]',
  exportAs: 'appDnd' // 新增该行，用于模板中引用指令实例
})
export class DndDirective {
  @Output() fileDropped = new EventEmitter<FileList>(); // 新增输出事件，把文件传给组件

  // 原有代码不变，打开drop事件中emit的注释
  @HostListener('drop', ['$event']) public ondrop(evt){
    evt.preventDefault();
    evt.stopPropagation();
    this.fileOver = false;
    const files = evt.dataTransfer.files;
    if(files.length > 0){
      this.fileDropped.emit(files); // 取消该行注释
      this.main.uploadedResume = true;
    }
  }

  // 新增input调用的处理方法
  fileBrowseHandler(files: FileList): void {
    if(files?.length) {
      this.fileDropped.emit(files);
      this.main.uploadedResume = true;
    }
  }
}

2. 修改HTML模板，绑定指令实例的方法：

<div class="drag-area" appDnd #dndDir="appDnd" *ngIf="!main.uploadedResume">
  <input
    type="file"
    #fileDropRef
    id="fileDropRef"
    multiple
    (change)="dndDir.fileBrowseHandler($event.target.files)"
    hidden
>

3. （可选）如果不需要其他模块使用DndDirective，可以删掉AppModule中exports数组里的DndDirective配置，同一模块内声明的组件、指令可以直接互相使用，不需要导出。

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