Angular2 router.navigate rafraîchir la page

Question

Voici à quoi ressemblent les routes et le composant :

routes.config

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: 'users/new', component: NewUserComponent },    
];

nouveau-utilisateur.composant

 addField(newName: string){
        this.items.push({ 
          name: newName,
      })
      this._router.navigate(['/users'])

Est-ce qu'Angular2 est censé rafraîchir la page sur router.navigate ?

Ce qu'il faut utiliser à la place de router.navigate pour éviter tout rafraîchissement de la page ?

En voici la preuve :

Answer 1

Vous appelez probablement le router.navigate dans un événement de clic.

<button class="btn btn-default"
    (click)="save()">Save</button>

Et la fonction de sauvegarde étant quelque chose comme

save() {
    //Do stuff
    this._router.navigate(['/users', { id: userId } ]);
}

Cela fonctionne sur les navigateurs IE11 et Edge, mais rechargerait l'application dans Chrome.

Cela est dû au fait qu'il manque type dans l'élément bouton, si le bouton se trouve dans un élément <form></form> Chrome utilisera "submit" comme valeur par défaut. Cela entraîne l'envoi d'un formulaire lorsque le bouton est cliqué.

Il est préférable de toujours définir un type lorsque vous utilisez le button élément Voir ici :

Donc, en changeant le HTML en

<button class="btn btn-default" type="button"
        (click)="save()">Save</button>

Cela fonctionnera sur les 3 navigateurs.

Ma solution précédente fonctionne également (en renvoyant false, elle empêche l'action par défaut, c'est-à-dire la soumission du formulaire), mais je pense que la solution ci-dessus est préférable.

Réponse obsolète mais conservée pour la postérité :

<button class="btn btn-default"
        (click)="save(); false">Save</button>

Answer 2

J'ai obtenu le même effet (rafraîchissement de la page lors de la navigation vers la page des détails) en utilisant un simple <a href="http://stackoverflow.com/details/1"></a> lien. La solution était d'utiliser le lien angulaire : <a [routerLink]="['/details', 1]"></a>

Answer 3

Pour moi, cela fonctionne bien (à partir du code du composant) :

window.location.href = "/sth";

il recharge automatiquement la page vers la partie url donnée.

Answer 4

Je sais que c'est une méthode simple, mais vous pouvez également définir ce code pour rafraîchir la route sur l'événement de succès après que toutes les opérations soient terminées.

window.open('users', '_self') ;

Il sera rechargé et redirigé vers la page de l'utilisateur.

Answer 5

Il s'agit d'une situation hybride AngularJS/Angular. J'ajoute la réponse parce que cette question est l'un des premiers résultats lorsque vous recherchez les problèmes de rechargement de la page du routeur Angular sur Google. J'espère que cela fera gagner du temps à quelqu'un d'autre.

Dans mon cas, j'avais une configuration de route Angular 2 (en fait 5) très simple qui fonctionnait en grande partie, sauf dans un cas où un lien d'une route à une autre provoquait inexplicablement un rechargement de la page. J'avais vérifié tous les suspects habituels, formulaire, bouton d'envoi, etc.

Il s'est avéré que quelque part dans un AngularJS qui était affiché au moment où l'on a cliqué sur le lien, il y avait une ng-include . La documentation met en garde contre ce problème pour une bonne raison, je suppose. J'ai remanié le modèle pour que le ng-include pourrait être transformé en un templateUrl et tout allait bien.