web-dev-qa-db-fra.com

Angular 2: route de redirection avec paramètres et paramètres facultatifs

Je veux rediriger un itinéraire vers un autre itinéraire:

/ foo/bar/123 schould à rediriger vers/bar/123; mode = test

J'ai configuré l'itinéraire de la manière suivante:

{ path: 'foo/bar/:id', redirectTo: '/bar/:id;mode=test' },

Lorsqu'il redirige, la partie ;mode=test est manquante dans l'URL cible. Comment puis-je l'inclure?

angularangular-routing
5
Johni

le routeur angulaire examine les objets de chemin et crée l'ensemble des itinéraires de base de votre application (sans les paramètres facultatifs). qui seraient alors utilisés pour reconnaître les itinéraires s’ils correspondent exactement au chemin. donc, les paramètres optionnels ne peuvent pas être utilisés à l'intérieur car ils sont "optionnels". et le seul moyen d'inclure des paramètres de route dans ces objets de chemin, est de les lier dans l'url avec la syntaxe ': quelque chose' qui ne serait alors pas optionnel. Je pense que vous avez d'autres moyens de couvrir ce besoin de votre:

en ajoutant votre paramètre "mode" à votre route de base: Vous pouvez définir un chemin tel que: { path:'/bar/:id/:mode', component: BarComponent } et changer votre chemin de redirection en { path: 'foo/bar/:id', redirectTo: '/bar/:id/test' }

en utilisant un composant proxy: changez le chemin de redirection en: { path: 'foo/bar/:id', component: BarProxyComponent } et définissez ce composant comme suit:

export class BarProxyComponent {
   constructor(private _router: Router, private _route: ActivatedRoute){
      _router.navigate(['/bar/'+_route.snapshot.params['id'],{mode: 'test'}]);
   }   
}

en utilisant un canActivate Guard: vous pouvez également créer un service de garde pour votre chemin "foo" et le rediriger vers la route de votre choix. Cependant, ce n'est pas vraiment l'intention réelle derrière ces gardes et c'est juste d'en tirer parti pour le dit problème ... vous pouvez changer le chemin de redirection en { path: 'foo/bar/:id', component: UnusedFooComponent, canActivate: [FooGuard]} et définir la garde comme ceci:

@Injectable()
export class FooGuard implements CanActivate {

constructor(private _router: Router){}
   canActivate(route: ActivatedRouteSnapshot) {
      this._router.navigate(['/bar/'+route.params['id'],{mode: 'test'}]);
      return false;
   }
}

n'oubliez pas également de fournir la FooGuard au niveau du module ..__ et notez qu'ici, vous redirigez toujours vers un autre endroit (et renvoyez false) dans la garde avant la création de la UnusedFooComponent ...

2
GHB