Comment rafraîchir un composant en Angular

Question

Je travaille sur un projet Angular. Je rencontre des difficultés avec l'action de rafraîchissement dans un composant.

Je voudrais rafraîchir les composants du routeur lors du clic sur un bouton. J'ai un bouton de rafraîchissement et lorsque je clique dessus, le composant/routeur doit être rafraîchi.

J'ai essayé window.location.reload() et location.reload() mais ces deux ne conviennent pas à mes besoins. Merci de m'aider si quelqu'un est au courant.

Answer 1

Après quelques recherches et avoir modifié mon code comme ci-dessous, le script a fonctionné pour moi. J'ai juste ajouté la condition :

this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this.router.navigate(['Your actualComponent']);
});

Answer 2

Utilisez le this.ngOnInit(); pour recharger le même composant au lieu de recharger toute la page !!

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Erreur");
      }   
  }

Answer 3

Ajouter ce code au constructeur du composant requis a fonctionné pour moi.

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Tromper le Router en lui faisant croire que son dernier lien n'avait pas été chargé précédemment
    this.router.navigated = false;
  }
});

N'oubliez pas de se désabonner de ce mySubscription dans ngOnDestroy().

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

Référez-vous à ce fil de discussion pour plus de détails - https://github.com/angular/angular/issues/13831

Answer 4

Heureusement, si vous utilisez Angular 5.1+, vous n'avez plus besoin d'implémenter un hack car le support natif a été ajouté. Vous avez juste besoin de définir onSameUrlNavigation sur 'reload' dans les options du RouterModule :

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

Plus d'informations peuvent être trouvées ici : https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Answer 5

C'est un peu hors du commun et je ne sais pas si cela vous aide ou non mais avez-vous essayé

this.ngOnInit();

C'est une fonction donc tout le code que vous avez à l'intérieur sera rappelé comme un rafraîchissement.