Comment passer des données d'un composant à un autre en angulaire?

Si vous souhaitez transmettre des données entre les composants, vous avez quelques options. Je ne vais pas assumer quoi que ce soit sur votre scénario et que ceux-ci fonctionnent, car en réalité beaucoup de fois lorsque nous sommes nouveaux, nous réalisons que nous devons légèrement ré-archiver nos composants afin de réaliser ce que nous voulons. Au lieu de cela, je partagerai les méthodes à votre disposition.

Reliure de données standard

Si vous essayez de transmettre des données d'un composant parent à un composant enfant, vous pouvez simplifier Louez les données lorsque vous ajoutez votre composant au composant parent.

parent.component.html xxx

enfant.component.ts < pré> xxx

émettant des données vers le haut

Si vous essayez de transmettre des données d'un composant enfant à un composant parent, vous pouvez émettre vos valeurs de Arbre de composant (aka bouillonnant l'arborescence du composant)

parent.componenent.html xxx

parent.component.ts xxx

enfant.commonent.ts xxx

maintenant, ceux-ci sont cuits dans des solutions qui sortent de la boîte avec angulaire. < p> Gestion de l'état, c'est-à-dire Redux, etc.

Je suggère fortement que vous exploriez des solutions de gestion de l'État tels que REDUX via NGRX si vous souhaitez avoir des pouvoirs de stockage et de transmission de données vraiment impressionnants.

ngrx est incroyable. C'est un peu intimidant pour certains d'abord, mais les avantages sont fous! Imaginez être dans le module x et avoir besoin de données de Module Y et aucun module n'est connecté par un composant? Eh bien, vous ne seriez pas capable de transmettre les données vers le haut et / ou vers le bas de l'arborescence des composants dans ce scénario, mais vous pouvez avec Redux.

espère que cela aide.

Une solution simple utilisera un service comme magasin pour stocker des réponses correctes. Veuillez trouver ci-dessous la solution:

Dans votre service Déclarez une variable privée et écrire des getters et des configurateurs pour celui-ci en service, comme ci-dessous: P>

private correctAnswerCount:number;

//if you are calling this method for each correct answer
incrementCorrectAnswerCount(){
this.correctAnswerCount++;
}

//if you are calling this method once
setCorrectAnswerCount(value:number){
this.correctAnswerCount = value;
}

//you can fetch this method from any compononent so as the value of correctAnswerCount
getCorrectAnswerCount(){
return this.correctAnswerCount;
}