Comment obtenir l'ID d'un élément d'entrée de formulaire pour une étiquette dans un modèle de composant angulaire réutilisable?

Question

J'ai un composant Angular 2 qui contient des éléments d'entrée de forme et des étiquettes qui devraient leur être associées. Plusieurs instances du composant peuvent être dans la page à la fois. Comment puis-je définir l'attribut for de l'attribut label et l'attribut id du input pour les connecter les uns aux autres?

Si je code en dur l'ID de l'élément d'entrée dans le modèle, il ne sera pas unique sur la page. Mais je ne veux pas avoir à passer un identifiant dans ce composant à partir de son composant contenant; la connexion entre l'étiquette et l'élément de formulaire est juste le souci de ce composant.

<div> 
    <label for="???">Name</label> 
    <input [(ngModel)]="name" type="text" id="???"/> 
</div> 

AngularJS avaient une propriété $ id champ qui pourrait être utilisé pour construire un identifiant unique. Est-ce que Angular a quelque chose de similaire pour les composants?

Answer 1

Une façon est d'utiliser le décorateur @input et transmettre des valeurs de parent où vous avez le composant au composant enfant où votre forme ou lable est

ParentComponent

<myComponent idToUse="id1"></myComponent> 
<myComponent idToUse="id2"></myComponent> 

ChildComponent

@Component({ 
selector : "myComponent", 
template: `<div> 
    <label for="{{idToUse}}">Name</label> 
    <input [(ngModel)]="name" type="text" id="{{idToUse}}"/> 
</div>` 
}) 
export class childComponent { 
@Input() idToUse; 
} 

Vous pouvez trouver un exemple similaire pour utiliser plusieurs fois le même article dans ce lien Angular2 .. Using the same component to show different data on the same page depending on service response