web-dev-qa-db-fra.com

Angular 2 - remplace l'historique au lieu de pousser

Comment remplacer un historique en poussant un nouveau routeur angular 2 (rc.1)?

Par exemple, je suis dans une liste de questions (/questions) ouverture d’un nouveau modal dans un nouvel itinéraire (/questions/add), et après avoir ajouté une nouvelle question, je passe à la vue des questions (/questions/1). Si je presse en arrière, je voudrais aller à la /questions au lieu de /questions/add

angulartypescriptangular2-routing
32
pleerock

Si tu utilises

router.navigate

Et alors

location.replaceState

Avec exactement le même chemin, vous pouvez déclencher des changements qui se produisent généralement, ainsi que remplacer l'historique.

Par exemple, dans votre cas:

this.router.navigate(['questions/1']);
this.location.replaceState('questions/1');

Si vous devez ajouter des paramètres à la route, vous pouvez créer l’URL de localisation à l’aide de

router.serializeUrl(router.createUrlTree(/* what you put in your router navigate call */));

Dans votre exemple:

this.router.navigate(['questions/1', {name:"test"}]);
this.location.replaceState(this.router.serializeUrl(this.router.createUrlTree(['questions/1', {name:"test"}])));

Mise à jour

Il semble que le routeur angular est maintenant livré avec une option de remplacement de l'URL . Dans votre exemple:

this.router.navigate(["questions/1"], {replaceUrl:true});

Mise à jour 2

Il existe un problème actuel dans lequel plusieurs navigations effectuées dans un court laps de temps peuvent ne pas remplacer correctement l'URL. En guise de solution de contournement temporaire, enveloppez la fonction de navigation dans un délai d'attente pour que chacun d'eux se déclenche dans un cycle séparé:

setTimeout(()=>{
    this.router.navigate(["questions/1"], {replaceUrl:true});
});
67
Jason

Vous souhaitez utiliser replaceState à partir de la classe Locations

https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#replaceState-anchor

3
Gary