Question

我有一个名为FileUploadComponent的组件的两个实例，其职责是监听文件事件（它是一个包含带有文件上传按钮的表单的简单模板，如下所示）并将其发送到它的托管组件通过EventEmitter。

看起来很简单，当我将这些组件中的两个（Comp1，Comp2）添加到模板中时，页面上按钮的第一个实例似乎甚至从该特定组件的单独实例接收所有事件。

所以要想象：

Comp1 ----------------------  / EventEmitter Fired 
Comp2 -- File uploaded ----- / -------

您可以在此处看到Comp1从此FileUploadComponent的后续实例收到一个事件，为什么会这样？

以下是文件：

file_upload_button.component.ts （为简洁省略了Component Decorator）

export class FileUploadButtonComponent {

  @Output() filesChanged = new EventEmitter<File[]>();
  private _files: File[];

  fileUpload(event: FileReaderEvent) {

    console.log(this); // !!! ====> this already triggers in the wrong component!

    this._files = event.target.files;
    this.filesChanged.emit(this._files);
  }
}

按钮模板：

file_upload_button.html

<form>
  <input type="file" multiple name="file" (change)="fileUpload($event)" id="file"/>
</form>

主持人模板：

some_host.html

// first instance
<file-upload-button (filesChanged)="filesChangedFunc($event)"><file-upload-button>
// second instance
<file-upload-button (filesChanged)="anotherFilesChangedFunc($event)"><file-upload-button>

当我点击第二个按钮时，第一个实例看到自己负责，上面代码中的console.log(...)提到了这一点。经过几个小时的代码我没有理解这里发生的事情。

PLUNKER：

http://plnkr.co/edit/7jzjL8dRsCFPUMrVb0I9?p=preview

Answer 1

那是因为你的元素分别有id和for。

您必须使用唯一ID：

应用/ file_upload_button.component.ts

let uniqueId = 0; @Component({ selector: 'file-upload-button', templateUrl: 'app/file_upload_button.html', styleUrls: [ 'app/file_upload_button.css' ] }) export class FileUploadButtonComponent { id = `file-upload-${uniqueId++}`;

应用/ file_upload_button.html

<input type="file" [name]="'name' + id" [id]="id" .../> <label [attr.for]="id" ...

<强> Plunker

Answer 2

如果没有更多信息我无法提供帮助，那就更好了，但我注意到你没有在 some_host.html 上正确绑定事件。

此：

// first instance
<file-upload-button (fileUpload)="filesChangedFunc($event)"><file-upload-button>
// second instance
<file-upload-button (fileUpload)="anotherFilesChangedFunc($event)"><file-upload-button>

应该是：

// first instance
<file-upload-button (filesChanged)="filesChangedFunc($event)"><file-upload-button>
// second instance
<file-upload-button (filesChanged)="anotherFilesChangedFunc($event)"><file-upload-button>

您想要绑定到 filesChanged 属性

两个组件干扰Angular2中的文件事件

PLUNKER：

2 个答案: