Navigieren zu übergeordneten aus Kind und Ausführen von Funktionen in übergeordnetes Element Angular2

Question

Ich habe Eltern mit einigen Daten, die aus der Datenbank abgerufen werden soll, wenn zurück zu übergeordneten von einer untergeordneten Komponenten navigieren. Diese Kinder werden mit Router-Outlet angezeigt.

Wir beginnen, dass der Benutzer von der Anmeldeseite zum übergeordneten Element navigiert wird, ohne dass ein Kind sichtbar ist. Ich habe eine Liste in Eltern, die aus der Datenbank abgerufen werden, wenn Sie zur Seite navigieren

constructor(private todoService: TodoService) { 
    this.todoService.getData() 
    .subscribe(data => this.data) 
} 

Das funktioniert gut. Diese Liste wird angezeigt, und wenn der Benutzer eines dieser Elemente auswählt, wird der Benutzer zu einem Kind navigiert, wo er dieses mit einem neuen Wert aktualisiert und dann zum übergeordneten Objekt zurück navigiert. Wie:

update(todo) { 
    this.service.updateData(todo) 
    .subscribe(data => { 
     console.log(data); 
     this.router.navigate(['parent']) 
    }); 
} 

Das Problem: Wenn der Benutzer auf die übergeordnete Ebene zurück bekommt, die übergeordnete Liste nicht aktualisieren, ich glaube, weil Eltern immer da? Wenn ich die Liste aktualisiere, ist das in Ordnung, also funktioniert update in child.

Wie kann ich die übergeordnete Komponente zur Ausführung this.todoService.getData(), die im Konstruktor ist, so dass ich die neue Version der Daten aus der Datenbank haben, so dass ich nicht Seite aktualisieren müssen.

Answer 1

Sie haben erwähnt, dass Ihr Kind hinter einer Router-Steckdose steht. Sie könnten einen geteilten Dienst verwenden, aber ich denke, dass es hier vielleicht zu viel ist, da Sie dem Elternteil nur sagen wollen, dass er die Funktion ausführen soll. Verwenden Sie stattdessen einen Betreff, der dem Elternteil die Ausführung der gewünschten Funktionen anweist.

BTW, Ihre Funktion in Eltern OnInit bewegen statt:

ngOnInit() { 
    this.todoService.getData() 
    .subscribe(data => { 
     this.data = data; 
    }); 
} 

Wenn dies geschehen ist, erklären zu Kind Aktion ein Thema in Ihrer Mutter

public static updateList: Subject<boolean> = new Subject(); 

innen Mutter Konstruktor, hören und abonnieren dazu:

ParentComponent.updateList.subscribe(res => { 
    this.todoService.getData() 
    .subscribe(data => { 
     this.data = data; 
    }); 
}); 

und in Ihrem Kind:

update(todo) { 
    this.service.updateData(todo) 
    .subscribe(data => { 
     console.log(data); 
     // add this! 
     ParentComponent.updateList.next(true); 
     this.router.navigate(['parent']) 
    }); 
}