使用 ng2-file-upload 的 Angular2+ 文件上传 - 子组件不断调用父组件函数

Question

我有一个父组件，其中有 2 个输入type="file"元素，它们在文件更改时调用函数getFileForParent()：

<input type="file" (change)="getFileForParent()" />

在我的子组件中，我有一个：

<input type="file" (change)="getFileForChild()" />

但是每当我在子组件上选择一个文件时，都会调用父组件getFileForParent。 我正在使用ng2-file-upload.

家长 ts：

getFileForParent(){
if(this.uploaderForParent.queue[0].file.type != 'application/PDF'){
this.showError("Please select pdf files only");
return;
}
this.uploaderForParent.uploadAll();
}

子 ts：

getFileForChild(){
if(this.uploaderForChild.queue[0].file.type != 'application/PDF'){
this.showError("Please select pdf files only");
return;
}
this.uploaderForChild.uploadAll();
}

Answer 1

它对我来说工作正常

演示

父组件.html

<h1>
Parent Component File inputs:
</h1>
<input type="file" ng2FileSelect [uploader]="uploaderForParent" (change)="getFileForParent()" />
<input type="file" ng2FileSelect [uploader]="uploaderForParent" (change)="getFileForParent()" />

<h1>
Child Component File inputs:
</h1>
<app-child-comopnent></app-child-comopnent>

parent.component.ts：

uploaderForParent: FileUploader = new FileUploader({ url: 'any' });
getFileForParent() {
console.log("Parent");
console.log(this.uploaderForParent);

if (this.uploaderForParent.queue[0].file.type != 'application/PDF') {
alert("Please select pdf files only");
return;
}
//this.uploaderForParent.uploadAll();
}

child.component.html：

<input type="file" ng2FileSelect [uploader]="uploaderForChild" (change)="getFileForChild()" />

child.component.ts：

uploaderForChild: FileUploader = new FileUploader({ url: 'any' });
getFileForChild() {
console.log("child");
console.log(this.uploaderForChild);
if (this.uploaderForChild.queue[0].file.type != 'application/PDF') {
alert("Please select pdf files only");
}
//this.uploaderForChild.uploadAll();
}