小编nii*_*iio的帖子

我创建了具有拖放功能的文件上传指令。奇怪的是，当从打开的窗口中选择文件时，它正在工作，但当拖放文件时，它不起作用，即使整个逻辑相同并且变量具有相同的值。即使代码运行到 .emit 行，下面的代码也不会发出事件

    @Output() public fileSelect: EventEmitter<File> = new EventEmitter<File>();

    @HostListener('drop', ['$event'])
  public onDrop(event: any): void {
    console.log("drop");
    const transfer = this.getDataTransfer(event);

    if (!transfer) {
      return;
    }

    this.preventAndStop(event);
    this.emitFileOver(false);

    this.handleFiles(transfer.files);
  }

    private emitFileSelect(file: any): void {
    this.fileSelect.emit(file);
  }

拖放和从窗口选择文件之间的区别仅在于监听器。下面的代码打开选择窗口，当选择文件时，将调用handleFiles，就像拖放事件一样。

@HostListener('change', ['$event'])
  public onChange(event) {
    console.log("change");
    this.handleFiles(event.srcElement.files);
  }

如您所见，两个侦听器都使用相同的参数值调用handleFiles（我对其进行了调试）。整个代码：

   import { FileUploadState, FileOptions } from './file-drop.models';
import {
  Directive,
  EventEmitter,
  ElementRef,
  HostListener,
  Input,
  Output
} from '@angular/core';

@Directive({ selector: '[pdFileDrop]' })
export class FileDropDirective {
  @Output()
  public fileOver: EventEmitter<boolean> = new …