angular.js - angular2多个相同组件使用问题

Question

在父组件里面引用多个相同的子组件就像这样：

效果是生成两个文件上传控件如下：

因为控件是使用input和label来模拟的，所以需要在上传控件变化时获取文件名并付给控件显示，控件会绑定相关的绑定变量，监听函数如下：

但是为什么我点击第二个控件的时候总是改变了第一个控件的值而第二个没反应？

更新
额不好意思，忘记贴子组件模板了：

问题出在模板上面，我用了label的for来对应input的ID，然而ID一开始被我写死了，所以后面怎么操作只是对应到第一个ID上面，把ID和for改成动态的就可以了~

Answer 1

Terima kasih atas jemputan, kod yang diberikan terlalu sedikit. . .

Sebab yang saya rasa untuk masalah:
1. Masalah label css Sebagai contoh, label pertama terlalu besar dan meliputi kawasan kedua, tersilap mengira bahawa yang kedua diklik.

2 Skop komponen muat naik fail tidak diasingkan. Antaranya, ini merujuk kepada CTRL induk.

Answer 2

Apabila anda mengklik pada kawalan kedua, anda masih perlu mendapatkan kawalan pertama, saya rasa ia adalah kerana anda tidak mengenal pasti dua kawalan.
Penyelesaian:
Dalam sudut 2 kami biasanya menggunakan @Viewchild atau @Viewchildren untuk mentakrifkan pengecam komponen untuk sarang komponen.
@Viewchild biasanya digunakan untuk satu kawalan
@Viewchildren digunakan untuk berbilang kombinasi kawalan, seperti li

Jadi dalam templat anda boleh menulis seperti ini:
<cy-page-fileUploadEle #upload1></cy-page-fileUploadEle>
<cy-page-fileUploadEle #upload2></cy-page-fileUploadEle> ;

Kemudian tentukan dua sifat ini dalam kelas
@Viewchild("upload1") upload1: CyPageFileUPloadEle; (nama kelas kawalan)
@Viewchild("upload2") upload2: CyPageFileUPloadEle; (nama kelas kawalan)

Apabila membuat panggilan, anda boleh menulis seperti ini:
this.upload1.nativeElement....

Answer 3

Jika saya menulis, saya akan tetapkan terus ketelusan input[type="file"] kepada 0, dan kemudian saiznya hanya akan meliputi perkara di bawah, supaya saya tidak perlu risau tentang atribut untuk label - -