Je suis donc coincé là-dessus. J'essaie de faire parler le composant Parent ou de l'intégrer avec le composant enfant. Voici le composant parent qui a essentiellement la boucle for utilisée pour itérer ou générer plus de liens si un utilisateur veut en ajouter plus ou appuie sur le bouton pour en ajouter plus.
<div class="section url-wrap">
<input aria-label="URL Title" placeholder="Title" type="text" [value]="urls[i].title" (ngModel)="urls[i].title" name="url.title.{{ i }}"
(input)="updateTitle(i, $event.target.value)">
<input aria-label="URL" placeholder="https://example.com" type="text" [value]="urls[i].url" (ngModel)="urls[i].url" name="url.url.{{ i }}"
(input)="updateUrl(i, $event.target.value)">
</div>
Le composant parent ne devrait pouvoir enregistrer et afficher que la sortie du composant enfant.
Ceci est un exemple du composant enfant
<div class="section url-wrapper">
<div *ngFor="let url of urls; let i = index;" class="link input-wrapper">
<childComponent></childComponent>
<button class="button bad icon-only" (click)="removeURL(i)">
<i class="far fa-times"></i>
</button>
</div>
</div>
J'ai besoin d'aide à la fois pour permettre au composant parent d'enregistrer l'entrée du composant enfant et pouvoir itérer de la boucle for du parent si cela est possible.
Veuillez me faire savoir si vous avez besoin de plus d'informations telles que les fichiers des composants ou des précisions
3 Réponses :
Le moyen standard de laisser les composants se parler les uns les autres est avec entrée-sortie:
Vous pouvez passer des valeurs du parent aux enfants avec @Input par exemple:
Code parent: strong>
<childComponent [someInputValue]="hello" (itemSelectedOutput)="someParentMethod($event)"></childComponent>
someParentMethod(event: any) {
console.log(event);
}
Code enfants:
@Output() itemSelectedOutput: EventEmitter<any> = new EventEmitter();
buttonClicked() {
this.itemSelectedOutput.emit("clicked");
}
et vous pouvez passer des valeurs (après avoir été déclenché) des enfants au parent:
Code enfants:
@Input() someInputValue; //this property will be "hello"
Code parent:
<childComponent [someInputValue]="hello"></childComponent>
Vous pouvez atteindre la même chose avec ISubscription mais je vous suggère d'utiliser la méthode ci-dessus
J'espère que cela pourra vous aider
Je comprends, en gros le [someInputValue] = "hello" imprimera ceci dans le composant parent et la même règle peut être appliquée si nous voulions enregistrer correctement l'entrée des utilisateurs?
@ B.Allen avec entrée vous transmettez une valeur appartenant au composant parent au composant enfants. Vous devez imaginer des composants tels que des boîtes où vous ne pouvez pas voir en dehors d’eux si ce n’est avec des paramètres d’entrée et de sortie qui sont des moyens de se lier. Quoi qu'il en soit, oui, vous pouvez transmettre tout ce que vous voulez, les objets aussi. Si vous avez trouvé ma réponse correcte, veuillez la cocher comme meilleure réponse :)
Merci je comprends que cela a du sens! Je vois maintenant comment le composant parent peut parler au composant enfant, en particulier avec l'entrée et la sortie.
Le code et l'exemple ci-dessous montreront comment les données circulent depuis parent -> enfant -> parent en utilisant les directives @Input () et @Output () .
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<div class="section url-wrap">
<input aria-label="URL Title" placeholder="Title" type="text" [value]="url.title"
(input)="handleUrlUpdate($event, 'title')"/>
<input aria-label="URL" placeholder="https://example.com" type="text" [value]="url.url"
(input)="handleUrlUpdate($event, 'url')"/>
</div>
`,
})
export class ChildComponent implements OnInit {
@Input() url; // passed in from parent via [url] property on <app-child>
@Output() updateUrl = new EventEmitter();
constructor() { }
ngOnInit() {
// this.url is now available for the life of the child component (assuming it was passed by the parent)
}
handleUrlUpdate($event, propToUpdate) {
// overkill, but used to demonstrate a point
this.updateUrl.emit({url: this.url, prop: propToUpdate, newValue: $event.target.value});
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<div class="section url-wrapper">
<div *ngFor="let url of urls" class="link input-wrapper">
<app-child [url]="url" (updateUrl)="onUrlUpdate($event)"></app-child>
</div>
</div>
`
})
export class ParentComponent implements OnInit {
public urls = [
{url: "https://example.com", title: "Example1"},
{url: "https://example.com", title: "Example2"},
{url: "https://example.com", title: "Example3"},
]
constructor() { }
ngOnInit() {
}
onUrlUpdate($event) {
// completely overkill, but just used to demonstrate a point
var url = this.urls.find(_url => {
// we can see here that the $event.url is actually the same object as the urls[i] that was
// passed to the child. We do not lose the reference when it is passed to the child or back
// up to the parent.
return $event.url === _url
});
if (url) {
url[$event.prop] = $event.newValue;
}
console.log(`Updated URL's "${$event.prop}" property with the value "${$event.newValue}"`);
}
}
Pour une raison quelconque, je n'ai pas pu accéder au lien avec l'exemple, mais votre solution a définitivement répondu à ma question et a du sens! Ma seule question est est-ce que le tableau des URL publiques est rempli avec la sortie attendue? ou avez-vous volontairement ajouté les données d'exemple?
@ B.Allen Le tableau des URL publiques est simplement rempli avec les données d'exemple. Vous pouvez remplir cette liste comme vous le souhaitez. Il poussera les URL vers le composant enfant et les rendra en conséquence. De plus, j'ai corrigé le lien ci-dessus, vous devriez donc avoir accès à l'exemple de travail maintenant
Merci beaucoup! Cela m'a certainement aidé à comprendre le fonctionnement de l'imbrication des composants et à mieux comprendre comment les composants fonctionnent en angulaire!
Je ne le ferais pas de cette façon en particulier. Si les enfants doivent connaître les parents, alors votre architecture doit être ajustée
Pour permettre au composant parent d'enregistrer l'entrée du composant enfant, vous utilisez ce que l'on appelle Event Emitters voir aussi la documentation officielle < / a>
@mhodge Mais les émetteurs d'événements permettront-ils le traitement de la boucle for dans le composant enfant?
Je ne comprends pas cette partie de la question. Qu'entendez-vous par "traiter la boucle for dans le composant enfant"?
Vous verrez donc dans le composant parent où j'ai une boucle ngFor un émetteur d'événement pourrait-il enregistrer les index du tableau?
Voulez-vous dire "avoir accès à l'url pour cette itération de
* ngFor? Si oui, c'est à cela que sert la directive@Input (). Vous pouvez transmettre l'url à l'enfant comme ceci, @Input () url; < / code>. La valeur sera disponible au moment où le hook de cycle de viengOnInit ()s'exécute.La directive
@Output ()envoie les données de l'enfant à un parent. La directive@Input ()(sur un enfant) reçoit des données du parent.J'essaierai ceci une fois que je serai à la maison mais c'est parfaitement logique! donc cela créera facilement la sortie pour le composant parent?
Je vais élaborer un exemple pour vous et le poster comme réponse, afin que vous puissiez voir comment tout cela fonctionne.