重用 Angular 9 组件答案

【问题标题】：reusing angular 9 component重用 Angular 9 组件
【发布时间】：2020-09-26 05:44:04
【问题描述】：

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

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

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

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

【问题讨论】：

也许您的实际上传元素共享相同的名称、id 或用于标识“唯一”元素的任何内容？
您应该与我们分享您的组件以检查问题出在哪里。
@xDrago 谢谢。我认为这可能是输入的 id。让我试试看。

标签： javascript angular typescript

【解决方案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" />

【讨论】：

【解决方案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>

【讨论】：