Javascript 重用Angular9组件

我有一个文件上传组件，

app file upload

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

应用程序文件
组件

我所期望的是，当我点击第一个文件上传按钮时，它将填充第一个
应用程序文件上传
上的列表。然后，当我点击第二个文件上传按钮时，上传的文件将进入第二个组件的列表

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

问题：我知道angular服务是作为单例创建的。组件也是如此？？这是没有意义的，因为组件是要重用的。还是我做错了什么？
这里有一个简单的文件上传组件，可以根据需要工作

此链接上的演示：

完整代码和额外代码：

//files.component.ts
从'@angular/core'导入{Component}；
@组成部分({
“templateUrl'：'./files.component.html'，
“选择器”：“应用程序文件”
})
导出类文件组件{
handleFileSelect（evt）{
var files=evt.target.files；//文件列表对象
var file=files[0]；
}
}






感谢@xDrago。我发现了问题。我有一个标签，用于输入类型文件（下面的代码）。我需要做的就是生成一个随机数，并将其分配给
标签的
和
输入的
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" />


{{buttonext}}
可能您的实际上载元素共享相同的名称、id或用于标识“唯一”元素的任何内容？您应该与我们共享您的组件以检查问题所在。@xDrago谢谢。我想可能是输入的id。让我试试。