Angular 2：重复使用相同的组件

Question

在我的父组件中，我引用了两次子组件，例如：

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

它会创建两个文件上传控件，例如： file upload

因为我使用输入和标签来模拟 fileUpload 控件，所以我需要将一些值绑定到标签以显示用户选择的文件名。我有一个 fileChange 函数，例如：

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'
    }
}

但是当我单击第二个控件并选择一个文件时，它没有反应但第一个控件的显示已经改变？ the problem

这是 cyPageFileUploadEle 组件的代码：

 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

我解决了这个问题，因为我使用了相同的输入控件 ID，请参阅 it