角度2：同じコンポーネントの使用を繰り返し

Question

私の親コンポーネントで私の好きな二回、子コンポーネント参照：

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

そして、それは次のように2つのファイルアップロードコントロールを作成します。私は入力してラベルを使用するため file upload

ファイルアップロードコントロールをシミュレートするので、私は、ユーザーは次のようにfileChange機能を持っているselected.Iというファイル名を表示するラベルにいくつかの値をバインドする必要がありますする：

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

しかし、2番目のコントロールをクリックしてファイルを選択すると、反応はありませんが、最初のコントロールの表示が変更されましたか？ 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