Angular2 输出 EventEmitter.emit 不起作用

Question

我创建了具有拖放功能的文件上传指令。奇怪的是，当从打开的窗口中选择文件时，它正在工作，但当拖放文件时，它不起作用，即使整个逻辑相同并且变量具有相同的值。即使代码运行到 .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 EventEmitter<boolean>();
  @Output()
  public fileUploadState: EventEmitter<FileUploadState> = new EventEmitter<
    FileUploadState
    >();
  @Output() public fileSelect: EventEmitter<File> = new EventEmitter<File>();
  @Input() public options: FileOptions;

  private element: ElementRef;

  public constructor(element: ElementRef) {
    this.element = element;
    this.element.nativeElement.setAttribute('multiple', 'multiple');
  }

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

    if (!this.haveFiles(transfer.types)) {
      return;
    }

    transfer.dropEffect = 'copy';
    this.preventAndStop(event);
    this.emitFileOver(true);
  }

  @HostListener('dragleave', ['$event'])
  public onDragLeave(event: any): void {
    console.log("dragLeave");
    if (event.currentTarget === (this as any).element[0]) {
      return;
    }

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

  @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);
  }

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

  ngOnInit() {
    console.log("Observers: " + this.fileSelect.observers.length);
  }

  private handleFiles(files: any) {
    console.log("handleFiles");
    // check all files
    for (let i = 0; i < files.length; i++) {
      console.log(i);
      const fileUploadState = <FileUploadState>{};
      const isFileTypeSupported = this.isFileTypeSupported(files[i].name);
      const isFileSizeAllowed = this.isFileSizeAllowed(files[i].size);

      fileUploadState.fileTypeNotAllowedError = !isFileTypeSupported;
      fileUploadState.fileSizeToBigError = !isFileSizeAllowed;
      fileUploadState.error = !isFileTypeSupported || !isFileSizeAllowed;
      fileUploadState.done = false;
      fileUploadState.file = files[i];
      this.emitFileSelect(fileUploadState);
    }
  }

  private emitFileOver(isOver: boolean): void {
    this.fileOver.emit(isOver);
  }

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

  private isFileTypeSupported(fileName: string): boolean {
    if (!this.options) {
      return true;
    } else if (!this.options.supportedFilesTypes) {
      return true;
    } else {
      return (
        this.options.supportedFilesTypes.indexOf(
          this.getFileExtensionFromFileName(fileName).toLowerCase()
        ) !== -1
      );
    }
  }
  private isFileSizeAllowed(fileSize: number) {
    if (!this.options) {
      return true;
    } else if (!this.options.maxUploadSizeInMb) {
      return true;
    } else {
      return fileSize / 1000000 <= this.options.maxUploadSizeInMb;
    }
  }

  private getDataTransfer(event: any | any): DataTransfer {
    return event.dataTransfer
      ? event.dataTransfer
      : event.originalEvent.dataTransfer;
  }

  private preventAndStop(event: any): void {
    event.preventDefault();
    event.stopPropagation();
  }
  private getFileExtensionFromFileName(fileName: string): string {
    return fileName.substr(fileName.lastIndexOf('.') + 1);
  }
  private haveFiles(types: any): boolean {
    if (!types) {
      return false;
    }

    if (types.indexOf) {
      return types.indexOf('Files') !== -1;
    }

    if (types.contains) {
      return types.contains('Files');
    }

    return false;
  }
}

发出的事件被组件捕获。如果选择文件，代码执行将像预期一样运行到此 fileSelect($event) 函数中（见下文），如果是 drg&drop，代码执行将在 emitFileSelect 函数的 .emit 行结束（见上文）。

<label pdFileDrop [options]="options" (change)="fileSelect($event)">
          <input type="file" />
        </label>

fileSelect($event) {
const that = this;
const reader = new FileReader();
const image = $event.target.closest('.box').querySelectorAll('img')[0];
$event.target.closest('.box').classList.add('thumb-shown');

reader.onload = function (event) {
  if (event && event.target && event.target['result']) {
    image.src = event.target['result'];
    that._file.id = that.id;
    that._file.src = event.target['result'];
    that.attachmentForm.controls['fileName'].patchValue(
      $event.target.files[0].name
    );
    that._file.description = $event.target.files[0].name; //fileName;
    that._file.rotation = that.rotateDeg;
    that._file.thumbnail = image.src;
    that._file.fileType = that.getFileType(image.src);
  }
};

也许 PreventAndStop 函数（阻止浏览器重定向到删除的文件路径并在浏览器中显示该文件）也阻止了 .emit 事件？更新：preventAndStop 函数不会阻止 event.emit。

Answer 1

您错误地使用了 Output EventEmitter：

尝试(fileSelect)="fileSelect($event)"代替(change)="fileSelect($event)