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

Question

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

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

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

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

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

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

Answer 1

Merci pour l'invitation, le code donné est trop petit. . .

Les raisons que je suppose du problème :
1. Problème d'étiquette CSS Par exemple, la première étiquette est trop grande et couvre la deuxième zone, pensant à tort que la seconde est cliquée.

2. La portée du composant de téléchargement de fichiers n'est pas isolée. Parmi eux, cela fait référence au CTRL parent.

Answer 2

Lorsque vous cliquez sur le deuxième contrôle, vous devriez toujours obtenir le premier contrôle. Je suppose que c'est parce que vous n'avez pas identifié les deux contrôles.
Solution :
Dans Angular 2, nous utilisons généralement @Viewchild ou @Viewchildren pour définir les identifiants de composants pour l'imbrication des composants.
@Viewchild est généralement utilisé pour un seul contrôle
@Viewchildren est utilisé pour plusieurs combinaisons de contrôles, telles que li

Donc, dans le modèle, vous pouvez écrire comme ceci :
<cy-page-fileUploadEle #upload1></cy-page-fileUploadEle>
<cy-page-fileUploadEle #upload2></cy-page-fileUploadEle> ;

Définissez ensuite ces deux propriétés dans class
@Viewchild("upload1") upload1: CyPageFileUPloadEle; (nom de classe du contrôle)
@Viewchild("upload2") upload2: CyPageFileUPloadEle;

Lorsque vous appelez, vous pouvez écrire comme ceci :

this.upload1.nativeElement....

Answer 3

Si j'écris, je définirai directement la transparence de input[type="file"] sur 0, puis la taille couvrira simplement les éléments ci-dessous, afin de ne pas avoir à me soucier de l'attribut for de l'étiquette - -