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

时间:2018-08-10 05:19:17

标签: javascript html angular file-upload ng2-file-upload

我有一个父组件,其中有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();
}

1 个答案:

答案 0 :(得分:1)

  

对我来说很好

DEMO

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();
  }