web-dev-qa-db-fra.com

Angular2 router.navigate actualiser la page

Voici à quoi ressemblent les itinéraires et les composants:

routes.config

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

new-user.component

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

Angular2 est-il supposé actualiser la page sur router.navigate? 

Quoi d'autre utiliser à la place de router.navigate pour éviter tout rafraîchissement de page?

Voici la preuve:  enter image description here

angularangular2-routing
36
Cristian Muscalu

Vous appelez probablement la fonction router.navigate dans un événement click.

<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û à une variable type manquante dans l'élément button. Si le bouton se trouve dans un <form></form>, Chrome utilisera "submit" comme valeur par défaut. Causer un formulaire soumettre lorsque le bouton est cliqué.

Il est préférable de toujours définir une type lors de l’utilisation de l’élément buttonVoir ici:

Donc changer le HTML pour

<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 la valeur false, cela empêcherait l’action par défaut. A.k.a. soumettre le formulaire), mais je pense que celle 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>
83
ElSnakeO

J'ai eu le même effet (actualisation de la page lors de la navigation vers la page de détails) en utilisant un simple lien <a href="/details/1"></a> .. La solution consistait à utiliser le lien angulaire: <a [routerLink]="['/details', 1]"></a>

2
Remy

Je connais sa méthode simple, mais vous pouvez également définir ce code pour actualiser l'itinéraire en cas de réussite une fois l'opération terminée.

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

Il va recharger et rediriger vers la page utilisateur.

1
Kavi Joshi

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

window.location.href = "/sth";

il recharge automatiquement la page dans une partie donnée.

1
Krystian

Ceci couvre une situation hybride AngularJS/Angular. J'ajoute la réponse car cette question est l'un des meilleurs résultats lorsque vous recherchez des problèmes de rechargement de page de routeur angulaire dans Google. J'espère que cela fera gagner du temps à quelqu'un d'autre. 

Dans mon cas, j'avais une configuration de route angulaire 2 très simple (en réalité 5) qui fonctionnait généralement sauf dans un cas où un lien d'une route à une autre entraînerait inexplicablement le rechargement d'une page. J'avais vérifié tous les suspects habituels, formulaire, bouton d'envoi, etc. 

Il s'est avéré que quelque part dans un composant AngularJS qui était affiché au moment où le lien a été cliqué, il y avait un ng-include. La documentation met en garde à ce sujet pour une raison, je suppose. Redistribuez le modèle afin que le ng-include puisse être remplacé par un templateUrl et que tout allait bien. 

0
Tommy Hansen