帶有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

對我來說很好

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