Composant RadioButton partagé dans Angular2

Question

Je souhaite réutiliser mon composant sur la même page, mais j'ai le problème de définir la valeur de mes boutons radio en fonction de celle sur laquelle je travaille.

J'ai trois composants partagés et je ne sais pas comment le faire pour les différencier. Je veux dire, si je travaille sur le premier, je ne veux pas que les deux autres composants soient modifiés. J'ai résolu en utilisant un mode "drastique", et je voudrais le faire mieux. Toute suggestion serait appréciée.

Voici mon code html:

<div class="ui form"> 
    <div class="inline fields"> 
    <label for="fruit">Send to:</label> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="radio{{A}}{{B}}" value="selected" [(ngModel)]="option"> 
     <label>Send Selected</label> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui radio checkbox"> 
     <input type="radio" name="radio{{A}}{{B}}" value="all" [(ngModel)]="option"> 
     <label>Send All</label> 
     </div> 
    </div> 
    </div> 
</div> 

La façon dont je fais est de déclarer la valeur A et B, qui sont booléens, mais je pense est une mauvaise façon de le résoudre.

Les variables de ses composants sont:

@Input() A: boolean; 
@Input() B: boolean; 
@Input() C: boolean; 
private option: string = 'selected'; 

est-il une méthode pour améliorer cette solution? :

name="radio{{A}}{{B}}" 

Answer 1

Il est un peu clair dans quel but A, B et C servent, mais en utilisant seulement deux booléens limiterait sévèrement la quantité de cas possibles uniques que vous pouvez utiliser.

Quoiqu'il en soit, je ferais une des opérations suivantes:

• Créer un service pour générer name uniques s pour chaque instance du composant que le composant fera appel à OnInit, et magasin pour le reste de sa durée de vie (que bien sûr vous pourriez recycler OnDestroy).

• Ajoutez un autre @Input pour le nom du groupe radio et laissez le consommateur du composant décider du nom du groupe.

MISE À JOUR:

Je viens de remarquer que vous ne devez pas utiliser l'attribut name=, vous pouvez l'omettre, les groupes angulaire automatiquement entrées radio quand ils sont liés à l'aide [(ngModel)] à la même « chose ".