Angular Datenkommunikation zu und von Komponenten

Question

Ich habe eine Elternkomponente (P1) und zwei Kindkomponenten (C1 und C2). Beide untergeordneten Komponenten verfügen über eine primeng-Datentabelle, die editierbar ist. Ich habe zwei Tasten auf P1: fetch() und speichern(). fetch() ruft die Datenbank auf, um die Daten abzurufen. Ich verwende einen gemeinsam genutzten Dienst, um Daten abzurufen und mit Hilfe von BehaviorSubject an die Komponenten weiterzuleiten. Mein Datenobjekt wie folgt aussieht:

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

Kinderkomponenten zu den Daten aus dem Shared-Service abonnieren. Jetzt ist das Problem, dass die Child-Komponenten auch die Daten ändern, die sie haben. Also auf Klick von save() auf dem P1, ich bin nicht in der Lage, die neuesten modifizierten Werte von den Kindkomponenten zu bekommen, da ich keine Möglichkeit habe, P1 zu melden, dass C1 und/oder C2 die Daten geändert haben.

Gibt es eine Möglichkeit, das gleiche zu tun, damit ich die untergeordneten Komponenten mitteilen könnte, wenn die save() genannt wird und es spiegelt sich in der parentObj?.

Answer 1

Ich konnte es lösen, um die ViewChild von '@angular/core' mit, da es kein Ereignis-Trigger auf den Komponenten Kind war. Der Elternteil kann das Kind lesen schreibt die @ViewChild(ChildComponent) child; Referenz verwenden: Here

Answer 2

Sie können Ereignisemitter für diesen Zweck verwenden UND das ist am nützlichsten, wenn von der untergeordneten Komponente zur übergeordneten Komponente kommuniziert wird.

Beispiel: -

P1 Komponente: -

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

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

C1 Komponente: -

@Output() notifyParent= new EventEmitter(); 

und dann

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

C2 Komponente: -

@Output() notifyParent= new EventEmitter(); 

und dann

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