重用 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.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>

Answer 2

我发现了问题。我有一个用于输入类型文件的标签（下面的代码）。我需要做的就是生成一个随机数并分配给的for和label的。idinput

 <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" />