web-dev-qa-db-fra.com

angular 2: Recharger le même composant à nouveau lors d'une redirection sur le même itinéraire

J'utilise 'routeurLink' pour naviguer sur mes itinéraires et tout fonctionne correctement. Mais lorsque je clique à nouveau sur le même bouton, je souhaite que ce composant soit chargé à nouveau. Mais actuellement, cela ne fonctionne pas dans angular2.

app.component.html

<ul class="nav navbar-nav navbar-right">
            <li><a [routerLink]="['/events']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">All Events</a></li>
            <li><a [routerLink]="['/events/new']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Create New</a></li>
</ul>

Je veux, lorsque je clique sur l'onglet "Tous les événements", encore et encore, le composant des événements se charge à chaque fois. 

Comment réaliser ce scénario dans angular2?

angularangular2-templateangular2-formsangular2-directives
5
Er Vipin Sharma

Je veux, lorsque je clique sur l'onglet "Tous les événements", encore et encore, le composant des événements se charge à chaque fois.

Ceci est Not Possible dans angular2. La raison en est qu'une fois que vous avez chargé un composant, ce composant n'est rechargé qu'une fois que vous avez parcouru un autre itinéraire.

Mais vous pouvez recharger avec force 

Fondamentalement, il existe deux méthodes qui sont

  • vous pouvez appeler la méthode ngOnInit() encore et encore selon les besoins, ce qui n'est pas recommandé

  • vous pouvez appeler une méthode commune à partir de ngOnInit() et plus tard selon les besoins, appelez cette fonction à nouveau comme ceci

    ngOnInit(){
    this.callingFunction();
}

forLaterUse(){
    this.callingFunction(); 
}

Une autre méthode consiste à charger le même composant lors du changement de paramètre dans le constructeur.

this.route.params.subscribe((params: Params) => {
    console.log(params); 
    this.callingFunction();
    // this will be called every time route changes
    // so you can perform your functionality here

});
5
Pardeep Jain

Ce lien github ci-dessous présente la bonne solution https://github.com/angular/angular/issues/13831

Mettez le code ci-dessous dans le constructeur du composant que vous voulez charger

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

this.router.events.subscribe((evt) => {
  if (evt instanceof NavigationEnd) {
    this.router.navigated = false;
    window.scrollTo(0, 0);
  }
});
3
Anonymous

Voir ici: Comment recharger la route en cours avec le routeur angular 2

Pour résumer, ce n'est pas une fonction intégrée au routeur. Il semble que la meilleure option consiste à utiliser un service qui actualise ou extrait à nouveau les données pertinentes et, en cas de changement, Angular mettra automatiquement à jour la vue. 

Si quelqu'un dit que quelque chose n'est pas possible dans Angular, c'est presque toujours faux. Ce n'est tout simplement pas possible avec les solutions existantes. ;-)

1
diopside