我有一个父组件,其中有2个输入type="file"
元素,它们在文件更改时调用函数getFileForParent()
:
<input type="file" (change)="getFileForParent()" />
在我的子组件中,我有一个:
<input type="file" (change)="getFileForChild()" />
但是每当我在子组件上选择一个文件时,就会调用父getFileForParent
。
我正在使用ng2-file-upload
。
父项:
getFileForParent(){
if(this.uploaderForParent.queue[0].file.type != 'application/PDF'){
this.showError("Please select pdf files only");
return;
}
this.uploaderForParent.uploadAll();
}
子项:
getFileForChild(){
if(this.uploaderForChild.queue[0].file.type != 'application/PDF'){
this.showError("Please select pdf files only");
return;
}
this.uploaderForChild.uploadAll();
}
答案 0 :(得分:1)
对我来说很好
parent.component.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();
}