在父組件里面引用多個相同的子組件就像這樣:
效果是生成兩個文件上傳控件如下:
因為控件是使用input和label來模擬的,所以需要在上傳控件變化時獲取文件名并付給控件顯示,控件會綁定相關的綁定變量,監(jiān)聽函數如下:
但是為什么我點擊第二個控件的時候總是改變了第一個控件的值而第二個沒反應?
更新
額不好意思,忘記貼子組件模板了:
問題出在模板上面,我用了label的for來對應input的ID,然而ID一開始被我寫死了,所以后面怎么操作只是對應到第一個ID上面,把ID和for改成動態(tài)的就可以了~
認證0級講師
謝邀,代碼給的太少了。。。
我猜測的出問題的原因:
1、label的css問題,比如,第一個label過大覆蓋了第二個區(qū)域,誤以為點擊了第二個。
2、file upload組件的作用域沒隔離。其中this都引用到了父CTRL。
點擊第二個控件的時候應該獲取到的還是第一個控件,我猜是因為你沒有對這兩個控件進行標識。
解決方案:
在angular 2 我們通常會使用@Viewchild 或 @Viewchildren 來進行組件嵌套定義組件標識。
@Viewchild 一般用于單個控件
@Viewchildren 用于多個控件組合,例如li
所以在template里你可以這樣寫:
<cy-page-fileUploadEle #upload1></cy-page-fileUploadEle>
<cy-page-fileUploadEle #upload2></cy-page-fileUploadEle>
然后在class里定義這兩個property
@Viewchild("upload1") upload1: CyPageFileUPloadEle; (控件的類名)
@Viewchild("upload2") upload2: CyPageFileUPloadEle; (控件的類名)
調用的時候你就可以這樣寫:
this.upload1.nativeElement.....
要是我寫的話,我會直接讓input[type="file"]的透明度為0,之后大小正好覆蓋下面的東西,這樣就不用糾結label的for屬性了 - -