Angular 2: gleiche Komponentenverwendung wiederholt

Question

In meiner Elternkomponente Referenz i zweimal untergeordnete Komponenten wie:

@Component({ 
    selector:'cy-page-phone', 
    template:` 
     <cy-page-fileUploadEle></cy-page-fileUploadEle> 
     <cy-page-fileUploadEle></cy-page-fileUploadEle> 
    `, 
    styleUrls:['./phone.component.scss'] }) 

Und es zwei Steuer Datei-Upload erstellen, wie: file upload

Weil ich die Eingabe und Label verwenden Um das fileUpload-Steuerelement zu simulieren, muss ich einen Wert an die Beschriftung binden, um den vom Benutzer ausgewählten Dateinamen anzuzeigen.Ich habe eine fileChange-Funktion wie:

Aber wenn ich auf das zweite Steuerelement klicke und eine Datei wähle, hat es keine Reaktion, aber die Show des ersten Controls hat sich geändert? the problem

Und das ist der Code der cyPageFileUploadEle Komponente:

import { 
    Component 
} from '@angular/core' 

@Component({ 
    selector:'cy-page-fileUploadEle', 
    templateUrl:'./fileUpload.element.html', 
    styleUrls:[ 
     './fileUpload.element.scss' 
    ] 
}) 
export class FileUploadEle{ 
    fileName:string='none select' 
    constructor(){ 
    } 
    fileChange(e:any){ 
     let fl:FileList=e.target.files 
     if(fl.length>1){ 
      this.fileName=`select ${fl.length} files` 
     }else if(fl.length===1){ 
      this.fileName=fl.item(0).name 
     }else if(fl.length===0){ 
      this.fileName='none select' 
     } 
    } 
} 

Answer 1

ich das Problem lösen, weil ich die gleiche ID meiner Eingabekontrolle verwenden, nur sehen it