[英]Angular2+ File Upload with ng2-file-upload - Child component keeps calling Parent Component functions
I have a parent component in which I have 2 input type="file"
elements which call the function getFileForParent()
on file change : 我有一个父组件,其中有2个输入
type="file"
元素,它们在文件更改时调用函数getFileForParent()
:
<input type="file" (change)="getFileForParent()" />
And in my child component I have one : 在我的孩子部分,我有一个:
<input type="file" (change)="getFileForChild()" />
but whenever I select a file on the child component the parents getFileForParent
is called. 但是,每当我在子组件上选择一个文件时,就会调用父
getFileForParent
。 I am using ng2-file-upload
. 我正在使用
ng2-file-upload
。
Parent ts: 家长ts:
getFileForParent(){
if(this.uploaderForParent.queue[0].file.type != 'application/PDF'){
this.showError("Please select pdf files only");
return;
}
this.uploaderForParent.uploadAll();
}
Child ts: 儿童ts:
getFileForChild(){
if(this.uploaderForChild.queue[0].file.type != 'application/PDF'){
this.showError("Please select pdf files only");
return;
}
this.uploaderForChild.uploadAll();
}
Its working fine for me
对我来说很好
parent.component.html 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: 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: child.component.html:
<input type="file" ng2FileSelect [uploader]="uploaderForChild" (change)="getFileForChild()" />
child.component.ts: 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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.