114 votes

Le routeur Angular2 conserve la chaîne de requête

J'ai écrit un Angular2 (v2.0.1) l'application qui permet d'utiliser le routeur. Le site web est chargé avec plusieurs paramètres de chaîne de requête, de sorte que la totalité de l'URL d'abord ressemble à ceci:

https://my.application.com/?param1=val1&param2=val2&param3=val3

Dans mon itinéraire de configuration, j'ai une entrée qui redirige un itinéraire vide:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

Mon problème est, que, après l'application a été amorcé, l'URL ne contient pas de paramètres de requête plus, au lieu de cela, il ressemble à ceci:

https://my.application.com/comp1

Est-il possible que je peux configurer le routeur afin qu'il garde la première chaîne de requête lors de la navigation?

Merci
Lukas

107voto

Günter Zöchbauer Points 21340

Je ne pense pas qu'il y est un moyen de définir que dans la configuration des routes.

Actuellement, il est pris en charge pour l' routerLinks et de l'impératif de navigation pour activer

Vous pouvez ajouter un garde pour le vide chemin de la route, où, dans la garde de navigation à l' /comp1 de l'itinéraire est fait.

router.navigate(['/comp1'], { preserveQueryParams: true }); //deprecated see update note
router.navigate(['/comp1'], { queryParamsHandling: "merge" });

Il y a un PR de permettre de configurer preserveQueryParams à l'échelle mondiale.

Mise à jour remarque: à partir de https://angular.io/api/router/NavigationExtras, preserveQueryParams est obsolète, utilisez queryParamsHandling au lieu

76voto

Kamalpreet Points 503

Si vous naviguez à l'aide d'un modèle HTML, vous pouvez utiliser

 <a [routerLink]="['/page-2']" [routerLinkActive]="['is-active']" queryParamsHandling="merge">
 

Il convient de noter que le paramètre queryParamsHandling est sans crochets.

16voto

AArias Points 1425

La réponse de Günter Zöchbauer devrait fonctionner correctement mais, pour une raison quelconque, cela ne fonctionne pas du tout pour moi. Ce qui a fini par fonctionner, c’est de passer les queryParams directement au lieu de les «préserver».

Voici à quoi ressemble ma garde:

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    (...)
    this.router.navigate(['login'], { queryParams: route.queryParams });
}
 

3voto

Martin Points 582

Vous pouvez vouloir rechercher sur https://github.com/angular/angular/issues une demande de fonctionnalité similaire à celle-ci. S'il n'en existe pas, soumettez une demande de fonctionnalité.

En attendant: je pense que vous devrez créer un composant, sur le chemin: '', dans le seul but de rediriger ensuite vers '/ comp1' tout en préservant les paramètres QueryString.

-3voto

dot52 Points 1

capturer l'URL d'origine dans -base href-

https://example.com/order?id=123

alors il va présister

https://example.com/order?id=123#/product

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X