Aktualisiere übergeordnete Komponente beim Navigieren von untergeordneten Komponente (Angular)

Question

Ich habe Probleme mit der Aktualisierung der übergeordneten Komponente beim Routing von Kind-Komponente. So viel habe ich durch Recherchen herausgefunden, dass ngOnInit nur einmal aufgerufen wird, aber wie kann man das umgehen? Ich habe verschiedene Lebenszyklus-Haken ausprobiert, aber entweder war ich nicht in der Lage, sie richtig zu benutzen oder ich sollte überhaupt nicht verwenden! Könnte jemand bitte helfen? VIELEN DANK!

Meine Routen:

{ 
    path: 'dashboard', 
    component: DashboardComponent, 
    children: [ 
     { 
      // when user is on dashboard component, no child component shown 
      path: '', 
     }, 

     { // detail component 
      path: ':table/:id', // 
      component: DetailComponent, 
     }, 
     //some more child routes and components... 
    ] 
} 

ngOnInit in Dashboard-Komponente (Eltern)

ngOnInit() { 
    this.getSomething1(); // this populates an array 
    this.getSomething2(); // this populates an array 
} 

Wenn der Benutzer über ein Element aus einem des Arrays choses, wird Benutzer zur Detailseite dieses Elements geleitet (DetailComponent), wo der Benutzer dieses Element aktualisieren/löschen kann.

Methode in geordnete Komponente, wenn Benutzer Artikel löscht, wird Benutzer Parent geroutet:

deleteItem(item: any) { 
    // some code... 
    this._router.navigate(['dashboard']); 
} 

Also alles funktioniert gut, außer, dass die Anordnung der Elemente nicht aktualisiert werden, da ngOnInit nur einmal aufgerufen wird.

So würde Ich mag die Methoden getSomething1() und getSomething2() laufen, wenn der Benutzer zurück zu DashboardComponent von untergeordneter Komponente DetailComponent geleitet wird.

Danke für jede Hilfe!

Answer 1

Eine Problemumgehung für diese Situation besteht darin, Themen zu verwenden.

Im DashboardComponent Sie einen Betreff erklären können:

public static returned: Subject<any> = new Subject(); 

und abonnieren sie:

constructor() { 
     DashboardComponent.returned.subscribe(res => { 
     this.getSomething1(); // this populates an array 
     this.getSomething2(); 
     }); 
    } 

Im DetailComponent, nachdem das Element zu löschen, rufen Sie in der Betreffzeile weiter:

deleteItem(item: any) { 
    // some code... 
    DashboardComponent.returned.next(false); 
    this._router.navigate(['dashboard']); 
}