重用angular 9组件

Question

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

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

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

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

Answer 1

感谢@xDrago。我找到问题了。我有一个标签，用于输入文件类型(代码如下)。我需要做的就是生成一个随机数，并将其分配给label的for和input的id。

 <label for="file-{{uniqueNumber}}" (click)="handleUploadClick()">
        <th-icon-upload></th-icon-upload>
        {{buttonText}}
    </label>
 <input type="file" id="file-{{uniqueNumber}}" [attr.multiple]="multiple ? '' : null" (change)="handleFileInput($event.target.files)" accept="{{acceptableFiles}}" 
        [attr.disabled]="successFilesCount >= maximumNumberOfFiles ? '' : null" />

Answer 2

这里是一个简单的文件上传组件，它可以按照您的需要工作。

通过此链接进行演示：https://angular-upload-csvx.stackblitz.io/

完整代码和额外内容：https://stackblitz.com/edit/angular-upload-csvx

//files.component.ts
import {Component} from '@angular/core';

@Component({
  'templateUrl': './files.component.html',
  'selector': 'app-files'
})

export class FilesComponent {
  handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    var file = files[0];
  }

}

<!--files.component.html-->
<div>
  <form>
    <div>
      <input type="file" (change)="handleFileSelect($event)">
    </div>
  </form>
</div>

<!--app.component.html-->
<div>
  <app-files></app-files>
  <hr>
  <app-files></app-files>
  <hr>
  <app-files></app-files>  
</div>