web-dev-qa-db-fra.com

Comment actualiser un composant dans Angular

Je travaille sur un projet angulaire. Je me bats avec l'actualisation d'une composante. 

Je voudrais actualiser les composants du routeur en cliquant sur le bouton . J'ai le bouton d'actualisation lorsque je clique dessus le composant/routeur doit être actualisé.

J'ai essayé window.location.reload() et location.reload() ces deux ne conviennent pas à mon besoin. S'il vous plaît aider si quelqu'un est au courant.

angularroutescomponentsrefresh
17
Sreehari Ballampalli

Après quelques recherches et modification de mon code comme ci-dessous, le script a fonctionné pour moi. Je viens d'ajouter la condition:

this.router.navigateByUrl('/RefrshComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Your actualComponent"]));
34
Sreehari Ballampalli

Ajouter ceci au code du 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) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

Assurez-vous de unsubscribe de cette mySubscription dans ngOnDestroy().

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

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

11
sankar

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("Error");
      }   
  }
6
Shinoy Babu

Heureusement, si vous utilisez Angular 5.1+, vous n'avez plus besoin d'implémenter un hack car le support natif a été ajouté. Il vous suffit de définir onSameUrlNavigation sur 'recharger' dans les options 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

6
Lucian Moldovan

Cela peut être réalisé via un hack, naviguez vers un exemple de composant, puis naviguez vers le composant que vous souhaitez recharger. 

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);
2
Sajeetharan

Dans mon application, j'ai un composant et toutes les données proviennent de l'API que j'appelle dans le constructeur de Component . Il y a un bouton par lequel je mets à jour mes données de page. sur le bouton, j'ai sauvegardé les données en arrière-plan et actualisé les données . Donc, recharger/actualiser le composant - conformément à mon exigence - consiste uniquement à actualiser les données . s'il s'agit également de votre exigence, utilisez le même code écrit dans le constructeur du composant.

1
Bh00shan

Autre moyen d’actualiser (difficile) une page en angle 2 comme ceci elle ressemble à f5  

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}
0
chirag sorathiya