角度2:重复使用相同的组件 [英] Angular 2 : same component usage repeatedly

问题描述

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

In my parent component i reference twice child component like:

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

它会创建两个文件上传控件，例如: 文件上传

And it create two file upload control like: file upload

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

Because i use the input and label to simulate the fileUpload control,so i need to bind some value to the label to show the file's name that the user selected.I have a fileChange function like:

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

但是当我单击第二个控件并选择一个文件时，它没有任何反应，但是第一个控件的显示已更改? 问题

But when i click the second control and select a file,it has no reaction but the first control's show has changed? the problem

这是cyPageFileUploadEle组件的代码:

And this is the cyPageFileUploadEle component's code:

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

推荐答案

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

I resolve the problem because i use the same id of my input control,just see it

这篇关于角度2:重复使用相同的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！