Je passe une valeur d'un composant à l'autre:
puis dans réserva.ts strong> J'ai ce qui suit: p> <div class="text-center">
<h4>{{nombre}}</h4>
<p>Desde: USD {{precio}} / persona</p>
</div>
4 Réponses :
Stackblitz - https://stackblitz.com/edit/angular-9d3bu4-so -56527061
Assurez-vous que le parent a défini le code> code> Nombre code> que vous passez (par la liaison d'une manière) lorsque vous utilisez app.component.ts em> strong> p> app.commonent.html em> stry> p> < App-Reserva [Precio] = "Precio" [Nombre] = "Nombre"> App-Reserva> Code> P>
Oui, ces valeurs sont déjà définies dans Réserva-paquet.commonent.ts code> Tout va bien avec ces valeurs. J'ai édité ma réponse afin que vous puissiez voir le code que j'ai ajouté. Je ne comprends pas pourquoi ces valeurs ne sont pas imprimées dans Reserva.Component.ts code>
Les valeurs passées par entrée () ne sont pas disponibles dans le constructeur car elles ne sont pas encore passées à l'enfant. Envisagez de construire votre formulaire dans la méthode Ngoninit () et vous devriez être bon d'aller! P>
Merci @gregbs Cela n'a pas résolu le problème. Je suis toujours imprimée sur la console dans ngoninit code> ces valeurs mais je reçois null
Essayez de retirer les crochets du composant et d'utiliser la syntaxe d'interpolation {{}}: https://stackblitz.com/edit/angular-jwhf87?file=src%2fapp%2fapp.component.html << / p> p>
Cela a provoqué les valeurs d'arrêter d'être null code> et il s'agit simplement d'un champ vide, c'est-à-dire: "" code>
Votre logique d'initialisation de composant devrait vivre dans paquete-detalle.component.ts strong> p> paquete-setalle.component.html strong> p> ressera.component.ts strong> p> p> P> P> Cette réponse ici fait un bon travail expliquant la différence entre La raison pour laquelle votre composant enfant initialise toujours un formulaire vide est parce que votre composant enfant a été créé avant que le composant parent ait fini l'exécution du rappel dans Ceci n'est qu'une approche, vous pouvez aussi Regardez dans ONCHANGES pour faire réagir votre composant enfant lorsque le ngoninit (). code> puisque votre composant parent a une logique asynchrone dans son propre Ngoninit () code> Vous voulez alors empêcher votre App-Reserva CODE> Composant d'être créé jusqu'à ce que vous avez toutes les données dont vous avez besoin. constructeur code> et ngoninit code>. p> this.fs.getpaqueObject (ID) .valuechanges (). S'abonner () Code>. Avec cette approche votre réserva.component.ts code> ne sera pas rendu tant que votre composant parent ne finit que toutes les données nécessaires à l'enfant. P> @input () Code> Valeurs change ou Résolution pour charger les données dans l'itinéraire avant la charge du composant. P > p>
Merci @spots Cela n'a pas résolu le problème. J'imprime toujours sur la console dans Ngoninit ces valeurs mais je reçois null
J'ai raté que votre composant parent a un comportement asynchreux. J'ai mis à jour ma réponse pour tenir compte de cela.
Excellents @spots Cela a beaucoup aidé, merci d'avoir expliqué l'approche. Je l'ai fait fonctionner mais avec un petit ajustement dans votre code: * ngif = "precio && nombre" code> cela a fonctionné pour moi. Si je le laisse dans * ngif = "null! == precio && null! == nombre" code> J'ai continué à obtenir null code>. Au fait, il y a une faute de frappe dans le * NGIF.
Réglage du formulaire dans le constructeur ne ressemble pas parfaitement à moi ...
pour
[precio] = "precio" code> est précisé dans le parent?Qu'en est-il de App-Reserva> (retirez les crochets [])
Au moment de la construction, les intrants n'ont pas été définis. Vous devez déplacer cela vers la méthode Ngoninit pour vous assurer que votre composant enfant a déjà reçu les intrants du parent. Ce qui se passe avec votre console.log est qu'à la phase oninit, il n'y a pas de valeur pour le precio et le NOMBRE, mais vous avez déjà créé une liaison dans le constructeur, alors lorsque le composant reçoit déjà les entrées, les modifications de la détection s'exécuteront et votre modèle sera mis à jour. avec les valeurs appropriées.
Je pense que les gens ignorent le fait que si vous n'êtes pas défini dans la console lors de l'appelant
console.log (this.precio, cela.nombre); code> IntérieurNgoninit code>.precio code> etnombre code> n'a pas été défini dans le parent