Communication de données angulaires vers et à partir de composants

Question

J'ai un composant parent (P1) et deux composants enfants (C1 et C2). Les deux composants enfants ont une table de données primeng qui sont modifiables. J'ai deux boutons sur P1: fetch() et save(). fetch() appelle la base de données pour obtenir les données. J'utilise un service partagé pour récupérer des données et les transmettre aux composants à l'aide de BehaviorSubject. Mon objet de données ressemble à:

export interface ParentObj { name: string; child1 : Child1[]; child2: Child2[]} 
export interface Child1 { weight: number;} 
export interface Child2 { code: string;} 

composants enfants souscrivent aux données du service partagé. Maintenant, le problème est que les composants enfants modifient également les données dont ils disposent. Donc sur un clic de save() sur le P1, je suis incapable d'obtenir les dernières valeurs modifiées des composants enfants car je n'ai aucun moyen de notifier P1 que C1 et/ou C2 a changé les données.

est-il un moyen d'accomplir la même pour que je puisse en informer les composants de l'enfant lorsque le save() est appelé et il reflète dans la ParentObj?.

Answer 1

j'ai pu le résoudre en utilisant la ViewChild de '@angular/core' car il n'y avait pas de déclenchement de l'événement sur les composants de l'enfant. Le parent peut lire l'enfant attribue à l'aide du @ViewChild(ChildComponent) child; Référence: Here

Answer 2

Vous pouvez utiliser un émetteur d'événement à cette fin ET cela est particulièrement utile lors de la communication d'un composant enfant vers un composant parent.

Exemple: -

composant P1: -

<c1 (notifyParent)="notify(data)"></c1> 
<c2 (notifyParent)="notify(data)"></c1> 

notify(data) { 
    console.log(data); //notify parent 
} 

composant C1: -

@Output() notifyParent= new EventEmitter(); 

puis

this.notifyParent.emit(data) //or notify with true value 

composant C2: -

@Output() notifyParent= new EventEmitter(); 

puis

this.notifParent.emit(data) //or notify with true value