重用 Angular 9 组件

Question

我有一个文件上传组件，app-file-upload它有一个文件类型和一个文件变量列表。一切正常，直到我想app-file-upload在同一页面上有多个组件。

我期望的是，当我单击第一个文件上传按钮时，它会填充第一个列表app-file-upload。然后当我点击第二个文件上传按钮时，上传的文件将进入第二个组件的列表。

实际发生的是第二个文件列表将转到第一个组件的列表。就好像第二个组件只是第一个组件的引用。

问题：我知道角度服务是作为单例创建的。组件也是？？这没有意义，因为要重用组件。还是我做错了什么？

Answer 1

这是一个简单的文件上传组件，可以按您的需要工作。此链接的演示：https ://angular-upload-csvx.stackblitz.io/完整代码和额外内容：https://stackblitz.com/edit/angular-upload-csvx//files.component.tsimport {Component} from '@angular/core';@Component({&nbsp; 'templateUrl': './files.component.html',&nbsp; 'selector': 'app-files'})export class FilesComponent {&nbsp; handleFileSelect(evt) {&nbsp; &nbsp; var files = evt.target.files; // FileList object&nbsp; &nbsp; var file = files[0];&nbsp; }}<!--files.component.html--><div>&nbsp; <form>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input type="file" (change)="handleFileSelect($event)">&nbsp; &nbsp; </div>&nbsp; </form></div><!--app.component.html--><div>&nbsp; <app-files></app-files>&nbsp; <hr>&nbsp; <app-files></app-files>&nbsp; <hr>&nbsp; <app-files></app-files>&nbsp;&nbsp;</div>

Answer 2

我发现了问题。我有一个用于输入类型文件的标签（下面的代码）。我需要做的就是生成一个随机数并分配给的for和label的。idinput&nbsp;<label for="file-{{uniqueNumber}}" (click)="handleUploadClick()">&nbsp; &nbsp; &nbsp; &nbsp; <th-icon-upload></th-icon-upload>&nbsp; &nbsp; &nbsp; &nbsp; {{buttonText}}&nbsp; &nbsp; </label>&nbsp;<input type="file" id="file-{{uniqueNumber}}" [attr.multiple]="multiple ? '' : null" (change)="handleFileInput($event.target.files)" accept="{{acceptableFiles}}"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; [attr.disabled]="successFilesCount >= maximumNumberOfFiles ? '' : null" />