J'ai une étiquette de formulaire dans un composant et son entrée personnalisée réutilisable associée dans un composant séparé. Je l'ai conçu comme ceci car parfois je veux une étiquette avec l'entrée personnalisée et parfois je ne le fais pas. Parfois, je veux que l'étiquette soit au-dessus de l'entrée personnalisée et parfois, je le souhaite en ligne avec l'entrée personnalisée. Ainsi, des composants séparés ont du sens. Il ressemble à quelque chose comme ça (bien que le balisage dans le composant parent puisse varier):
composant1.component.html: p> composant2.component.html p> <input id="myInput" ... loads of custom stuff here>
3 Réponses :
Vous pouvez envelopper les deux composants dans un composant parent et passer l'ID requis en émettant un événement en cliquant sur l'étiquette dans la
Votre code sera comme
parentcomponent.html et parentcomponent.ts sera et composant1.ts sera comme composant1.html lorsque le composant2.ts sera Comme et composant2.html
J'ai eu ce travail en faisant cela:
<label> <span>Label Text</span> <app-component2></app-component2> </label>
Vous pouvez relancer l'attribut d'identifiant en lisant l'identifiant comme un et dans le composant2 Modèle P> @input code>, le rendant sur l'élément de formulaire dans le modèle, puis la supprible de l'élément hôte (comme les identifiants HTML doivent être unique) Une fois le modèle initié. <label for="myInput">Label Text</label>
<app-component2 id="myInput"></app-component2>