Refresh Winkelkomponente, wenn bezogenen Daten von einer anderen Winkelkomponente gespeichert wird

Question

Ich arbeite an MEAN Stapel und eckig, und haben diese Methode unten in einem Winkelkomponente itemListDetailsComponent (in .ts-Datei) mit dem Namen:

onStatusUpdateClick() { 

    this.activatedRoute.queryParams.subscribe((params: any) => { 
     console.log('queryParams', params['itemId']); 
     this.itemsUpdateService.updateItemStatus(
      params['itemId'], 
      this.activatedRoute.data).subscribe(data => { 
      this.itemsUpdateService.statusChanged.emit("Status Changed"); 
     }, error => {super.handleError(error, (err) => {console.log(err)})});    
    }); 

} 

auch ist es eine andere Winkelkomponente (itemsSideListComponent), die eine Liste aller Elemente mit ihrem Status anzeigt. Jetzt , sobald die itemsListDetailComponent speichert und aktualisiert den Status des ausgewählten Elements, muss ich Refresh die angezeigte Liste der Elemente in der itemsSideListComponent.

Alle Informationen, wie kann ich die itemsSideListComponent für die Liste der sichtbaren Elemente, sobald die Daten eines ausgewählten Elements aus dem itemListDetailsComponent wird gespeichert/aktualisiert aktualisieren. Bitte

helfen, wie ich zu Winkel völlig neu bin.

Answer 1

Sie können Ereignis-Emitter-Service nutzen.

Hier ist die Dokumentation https://angular.io/api/core/EventEmitter

Wenn Sie mit der Arbeit in 1 Komponente ein Ereignis mit einigen spezifischen ID emittieren fertig sind. Und horchen Sie dieses Event auf Ihre gewünschte Komponente. Dort können Sie auch Daten an diese Listening-Komponente übergeben.

Answer 2

Ihre itemListDetailsComponent müssen ein Ausgabeereignis deklariert werden, die ausgelöst wird, wenn ein Element gespeichert wird/aktualisiert.

export class itemListDetailsComponent implements OnInit { 

    @Output() onSaveOrUpdate = new EventEmitter<Item>(); 

    onSave(item: any) { 
    // save and emit an event. 
    this.onSaveOrUpdate.emit(item); 
    } 

    onUpdate(item: any) { 
    // update and emit an event. 
    this.onSaveOrUpdate.emit(item); 
    } 
} 

Meine Antwort basiert auf einem assymption, dass die übergeordnete Komponente (Die Komponente, in der itemListDetailsComponent und itemsSideListComponent vorhanden) ist ‚orchestring‘ die Daten und Ihre Zwei-Komponenten sind juste verantwortlich für die Anzeige.

ParentComponent.html

<item-list-detail (onSaveOrUpdate)="doRefreshList($event)"></item-list-detail> 
<item-side-list [listToDisplay]="list"></item-side-list> 

Dies impliziert, dass itemsSideListComponent Nehmen wir als Eingabe die Daten anzuzeigen. Also:

export class itemListDetailsComponent { 

    @Input() 
    listToDisplay: any[]; 

} 

ParentComponent.ts

list: Item[] 

doRefreshList(item: any) { 

// Make a server call or add item to list... 
this.list.push(item); 
} 

Sie können eine Änderungserkennung vornehmen müssen je nachdem, ob Ihre Liste ist unveränderlich oder nicht.