Actualiser composante angulaire lorsque les données relatives sont enregistrées à partir d'un autre composant angulaire

Question

Je travaille sur MEAN pile et angulaire, et cette méthode ci-dessous dans un composant angulaire nommé itemListDetailsComponent (dans le fichier .ts):

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)})});    
    }); 

} 

En outre, il existe un autre composant angulaire (itemsSideListComponent) qui affiche une liste de tous les éléments avec leur statut. Maintenant, une fois que le itemsListDetailComponent enregistre et met à jour l'état de l'élément sélectionné, je dois refresh la liste des éléments affichés dans la itemsSideListComponent.

Toute info, comment puis-je actualiser la itemsSideListComponent pour la liste des éléments visibles , dès que les données d'un élément sélectionné de la itemListDetailsComponent est enregistré/mise à jour.

S'il vous plaît aider comme je suis complètement nouveau à angulaire.

Answer 1

Vous pouvez utiliser le service d'émetteur d'événements.

Voici la documentation https://angular.io/api/core/EventEmitter

Lorsque vous avez terminé le travail en 1 composant émettez un événement avec une pièce d'identité spécifique. Et écoutez (souscrivez) cet événement à votre composant désiré. Là, vous pouvez également transmettre des données à ce composant d'écoute.

Answer 2

Votre itemListDetailsComponent doit déclarer un événement de sortie qui est déclenché lorsqu'un élément est enregistré/mis à jour.

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); 
    } 
} 

Ma réponse est basée sur une assymption que le composant parent (le composant dans lequel itemListDetailsComponent et itemsSideListComponent existe) est « orchestring » les données et que vos deux composants sont responsables de l'affichage juste il.

ParentComponent.html

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

Cela implique que itemsSideListComponent prendre en entrée les données à afficher. Alors:

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); 
} 

Vous devrez peut-être faire une détection de changement selon que votre liste est immuable ou non.