在父元件裡面引用多個(gè)相同的子元件就像這樣： 
效果是產(chǎn)生兩個(gè)檔案上傳控制如下：
因?yàn)榭刂祈?xiàng)是使用input和label來(lái)模擬的，所以需要在上傳控制項(xiàng)變化時(shí)取得檔案名稱並付給控制項(xiàng)顯示，控制項(xiàng)會(huì)綁定相關(guān)的綁定變量，監(jiān)聽(tīng)函數(shù)如下：
但是為什麼我點(diǎn)擊第二個(gè)控制項(xiàng)的時(shí)候總是改變了第一個(gè)控制項(xiàng)的值而第二個(gè)沒(méi)反應(yīng)？ 
更新
額不好意思，忘記貼子組件範(fàn)本了：
問(wèn)題出在模板上面，我用了label的for來(lái)對(duì)應(yīng)input的ID，然而ID一開始被我寫死了，所以後面怎麼操作只是對(duì)應(yīng)到第一個(gè)ID上面，把ID和for改成動(dòng)態(tài)的就可以了~
3
0
0
認(rèn)證0級(jí)講師
謝邀，程式碼給的太少了。 。 。
我猜測(cè)的出問(wèn)題的原因：
1、label的css問(wèn)題，比如，第一個(gè)label過(guò)大覆蓋了第二個(gè)區(qū)域，誤以為點(diǎn)擊了第二個(gè)。
2、file upload元件的作用域沒(méi)隔離。其中this都引用到了父CTRL。
點(diǎn)擊第二個(gè)控件的時(shí)候應(yīng)該獲取到的還是第一個(gè)控件，我猜是因?yàn)槟銢](méi)有對(duì)這兩個(gè)控件進(jìn)行標(biāo)識(shí)。
解決方案：
在angular 2 我們通常會(huì)使用@Viewchild 或 @Viewchildren 來(lái)進(jìn)行組件嵌套定義組件標(biāo)識(shí)。
@Viewchild 一般用於單一控制項(xiàng)
@Viewchildren 用於多個(gè)控制項(xiàng)組合，例如li
所以在template裡你可以這樣寫：
然後在class裡定義這兩個(gè)property
@Viewchild("upload1") upload1: CyPageFileUPloadEle; (控制項(xiàng)的類別名稱)
@Viewchild("upload2") upload2: CyPageFileUPloadEle; (控制項(xiàng)的類別)
呼叫的時(shí)候就可以這樣寫：
this.upload1.nativeElement.....
要是我寫的話，我會(huì)直接讓input[type="file"]的透明度為0，之後大小正好覆蓋下面的東西，這樣就不用糾結(jié)label的for屬性了 - -
